Jquery 效果使用详解


Posted in Javascript onNovember 23, 2015

jQuery是一款同prototype一样优秀js开发库类,特别是对css和XPath的支持,使我们写js变得更加方便!如果你不是个js高手又想写出优 秀的js效果,jQuery可以帮你达到目的!

.hide()

隐藏匹配的元素。

.hide()

这个方法不接受任何参数。

.hide([duration][,complete])

duration

一个字符串或者数字决定动画将运行多久。

complete

在动画执行完时执行的函数。

.hide([duration][,easing][,complete])

duration

一个字符串或者数字决定动画将运行多久。

easing

一个字符串,表示过渡使用哪种缓动函数。

complete

在动画完成时执行的函数。

用法:

$('button').click(function(){


$('p').hide(2000)


});


$("div").click(function(){



$(this).hide(2000,function(){



$(this).remove()



})


}) 

 .show()

显示匹配的元素。

.show()

这个方法不接受任何参数。

.show([duration][,complete])

duration

一个字符串或者数字决定动画将运行多久。

complete

在动画执行完时执行的函数。

.show([duration][,easing][,complete])

duration

一个字符串或者数字决定动画将运行多久。

easing

一个字符串,表示过渡使用哪种缓动函数。

complete

在动画完成时执行的函数。

用法:

 $("button").click(function () {




$("p").show("slow");


});



$("div").first().show("fast", function showNext() {



$(this).next("div").show("fast", showNext);


});

.toggle()

显示或隐藏匹配的元素。

.toggle()

这个方法不接受任何参数。

.toggle([duration][,complete])

duration

一个字符串或者数字决定动画将运行多久。

complete

在动画执行完时执行的函数。

.toggle([duration][,easing][,complete])

duration

一个字符串或者数字决定动画将运行多久。

easing

一个字符串,表示过渡使用哪种缓动函数。

complete

在动画完成时执行的函数。

用法:

$("button").click(function () {



$("p").toggle();


});


$("button").click(function () {



$("p").toggle("slow");


});

.animate()

根据一组css属性,执行自定义动画。

.animate(properties[,duration][,easing][,complete])

properties

一个css 属性和值的对象,动画将根据这组对象移动。

duration(默认:400)

一个字符串或者数字决定动画将运行多久。

easing(默认 swing)

一个字符串,表示过度使用哪种缓动函数。

complete

在动画执行完时执行的函数。

 .animate(properties,options)

properties

一个CSS属性和值的对象,动画将根据这组对象移动。

options

一组包含动画选项的值的集合。

用法:

$("#go").click(function(){


$("#block").animate({




width: "70%",




opacity: 0.4,




marginLeft: "0.6in",




fontSize: "3em",




borderWidth: "10px"



 }, 1500 );


});



$("#right").click(function(){



$(".block").animate({"left": "+=50px"}, "slow");


});

对所有段落应用动画,使其 left 属性变为 50,透明度变为 1(即,不透明,可见),用时 500 毫秒。

$( "p" ).animate({



left: 50, opacity: 1


}, 500 );

.delay()

设置一个延时来推迟执行队列中后续的项。

.delay(duration[,queueName])

duration

一个整数,指示的毫秒数,用于设定下一个队列推迟执行的时间。

queueName

一个作为队列名的字符串。

效果:

我们可以在 <div id="foo"> 的 .slideUp() 和 .fadeIn() 动画之间设置800毫秒的延时:

$('#foo').slideUp(300).delay(800).fadeIn(400);

隐藏再显示两个div。其中绿色的div在显示之前,有800毫秒的延时。

$("button").click(function() {



$("div.first").slideUp(300).delay(800).fadeIn(400);




$("div.second").slideUp(300).fadeIn(400);

});

.stop()

 停止匹配元素当前正在运行的动画。

 .stop([clearQueue][,jumpToEnd])

clearQueue

一个布尔值,指示是否取消以队列动画,默认 false;

jumpToEnd

一个布尔值指示是否当前动画立即完成。默认false;

 .stop([queue ] [, clearQueue ] [, jumpToEnd ] )

queue

停止动画队列的名称。

clearQueue

一个布尔值,指示是否取消以列队动画。默认 false.

jumpToEnd

一个布尔值指示是否当前动画立即完成。默认false.

用法:

$("#stop").click(function(){


$(".block").stop();



}); //当点击这个运算的时候 立即停止动画。

.fadeIn()

通过淡入的方式显示匹配的元素。

.fadeIn([duration][,complete])

duration(默认:400)

 一个字符串或者数字决定动画将运行多久。

complete

在动画完成时执行的函数。

.fadeIn(options)

一组包含动画选项的值的集合。

.fadeIn([duration][,easing][,complete])

duration(默认:400)

一个字符串或者数字决定动画将运行多久。

easing(默认:swing)

一个字符串,表示过渡使用哪种缓动函数

complete

在动画完成时执行的函数。 

用法:

$(".btn2").click(function(){




$("p").fadeIn();


});

.fadeOut()

通过淡出的方式隐藏匹配元素。

.fadeOut([duration][,complete])

duration(默认:400)

一个字符串或者数字决定动画将运行多久。

complete

在动画完成时执行的函数。

.fadeOut(options)

一组包含动画选项的值的集合。

.fadeOut([duration][,easing][,complete])

duration(默认:400)

一个字符串或者数字决定动画将运行多久。

easing(默认:swing)

一个字符串,表示过渡使用哪种缓动函数

complete

在动画完成时执行的函数。

用法:

$(".btn2").click(function(){




$("p").fadeOut();


});

.fadeTo()

 调整匹配元素的透明度。

 .fadeTo(duration,opacity[,complete])

duration

一个字符串或者数字决定动画将运行多久。

opacity

0和1之间的数字表示目标元素的不透明度

complete

在动画完成时执行的函数。

.fadeTo(duration,opacity[,easing][,complete])

duration

一个字符串或者数字决定动画将运行多久。

opacity

0和1之间的数字表示目标元素的不透明度

easing

一个字符串,表示过渡使用哪种缓动函数

complete

在动画完成时执行的函数。

用法:

 $('input').click(function(){





$('#div1').fadeTo("slow",0.2,function(){







$('#div1').css("display","none");





})



})

.fadeToggle()

通过匹配元素的不透明度动画,来显示或者隐藏他们。

.fadeToggle([duration][,easing][,complete])

duration(默认:400)

一个字符串或者数字决定动画将运行多久。

easing(默认:swing)

一个字符串,表示过渡使用哪种缓动函数

complete

在动画完成时执行的函数。

.fadeToggle(opacity)

opacity

一组包含动画选项的值的集合。

用法:

$("input").click(function(){




$('#div1').fadeToggle(2000)


})

.slideDown()

用滑动动画显示一个匹配元素。

.slideDown([duration][,complete])

duration

一个字符串或者数字决定动画将运行多久。

complete

在动画完成时执行的函数。

.slideDown(opacity)

 opacity

 一组包含动画选项的值的集合。

.slideDown([duration][,easing][,complete])

duration

一个字符串或者数字决定动画将运行多久。

easing

一个字符串,表示过度使用哪种缓动函数。

complete

在动画完成时执行的函数。

用法:

 $("input").click(function(){




$('#div1').slideDown(2000)



})

.slideUp()

用滑动动画隐藏一个匹配元素。

.slideUp([duration][,complete])

duration

一个字符串或者数字决定动画将运行多久。

complete

在动画完成时执行的函数。

.slideUp(opacity)

opacity

一组包含动画选项的值的集合。

.slideUp([duration][,easing][,complete])

duration

一个字符串或者数字决定动画将运行多久。

easing

一个字符串,表示过度使用哪种缓动函数。

complete

在动画完成时执行的函数。

用法:

$("input").click(function(){



$('#div1').slideUp(2000)

})

.slideToggle()

用滑动动画显示或隐藏一个匹配的元素。 

.slideToggle([duration][,complete])

duration

一个字符串或者数字决定动画将运行多久。

complete

在动画完成时执行的函数。

.slideToggle(opacity)

opacity

一组包含动画选项的值的集合。

.slideToggle([duration][,easing][,complete])

duration

一个字符串或者数字决定动画将运行多久。

easing

一个字符串,表示过度使用哪种缓动函数。

complete

在动画完成时执行的函数。

效果:

$("input").click(function(){



$('#div1').slideToggle(2000)


})

以上内容是小编给大家介绍的Jquery 效果使用详解,希望大家喜欢。

Javascript 相关文章推荐
JQuery在光标位置插入内容的实现代码
Jun 18 Javascript
JS 操作符整理[推荐收藏]
Nov 15 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
EasyUI中实现form表单提交的示例分享
Mar 01 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
基于JQuery实现分隔条的功能
Jun 17 Javascript
jQuery事件_动力节点Java学院整理
Jul 05 jQuery
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
实用Javascript调试技巧分享(小结)
Jun 18 Javascript
VUE 解决mode为history页面为空白的问题
Nov 01 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
Jan 16 jQuery
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
JavaScript高级教程5.6之基本包装类型(详细)
Nov 23 #Javascript
jQuery实现简洁的导航菜单效果
Nov 23 #Javascript
Bootstrap每天必学之表格
Nov 23 #Javascript
js 右侧浮动层效果实现代码(跟随滚动)
Nov 22 #Javascript
JQuery实现简单的图片滑动切换特效
Nov 22 #Javascript
js实现简单计算器
Nov 22 #Javascript
javascript实现别踩白块儿小游戏程序
Nov 22 #Javascript
You might like
php实现的SESSION类
2014/12/02 PHP
PHP实现的简单分页类及用法示例
2016/05/06 PHP
PHP实现登录注册之BootStrap表单功能
2017/09/03 PHP
新手入门常用代码集锦
2007/01/11 Javascript
验证用户是否修改过页面的数据的实现方法
2008/09/26 Javascript
jquery学习笔记二 实现可编辑的表格
2010/04/09 Javascript
javascript 循环读取JSON数据的代码
2010/07/17 Javascript
改变隐藏的input中value值的方法
2014/03/19 Javascript
JavaScript中对象属性的添加和删除示例
2014/05/12 Javascript
node.js中的console.warn方法使用说明
2014/12/09 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
实例详解JSON数据格式及json格式数据域字符串相互转换
2016/01/07 Javascript
js 创建对象 经典模式全面了解
2016/08/16 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
Vue上传组件vue Simple Uploader的用法示例
2017/08/25 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
2020/11/09 Javascript
python处理PHP数组文本文件实例
2014/09/18 Python
Python实现数通设备端口使用情况监控实例
2015/07/15 Python
Python使用matplotlib简单绘图示例
2018/02/01 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
python的几种矩阵相乘的公式详解
2019/07/10 Python
Django和Flask框架优缺点对比
2019/10/24 Python
Python通过文本和图片生成词云图
2020/05/21 Python
scrapy利用selenium爬取豆瓣阅读的全步骤
2020/09/20 Python
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
Skyscanner阿联酋:全球领先的旅游搜索平台
2017/11/25 全球购物
美国汽车性能部件和赛车零件网站:Vivid Racing
2018/03/27 全球购物
白俄罗斯大卖场:21vek.by
2019/07/25 全球购物
意大利网上购书网站:Libraccio.it
2021/02/03 全球购物
澳大利亚领先的女性运动服品牌:Lorna Jane
2020/06/19 全球购物
毕业生自我鉴定
2013/12/04 职场文书
承诺书格式范文
2014/06/03 职场文书
导游词之四川熊猫基地
2020/01/13 职场文书