jQuery笔记（三）动画效果
动画效果
1、显示与隐藏
①show() - 显示
无参版本 - 不具有动画效果
②show(speed,callback)有参版本 - 具有动画效果，两个参数都可以不写
speed - 设置动画执行的时长,单位为毫秒，三个预定义值 - slow|normal|fast
callback - 当动画执行完毕后执行的函数，
$("div").show(5000);$("div").show(5000,function()\{alert('xxx');\});
③hide() - 隐藏
无参版本 - 不具有动画效果
④hide(speed,callback)有参版本 - 具有动画效果
speed - 设置动画执行的时长,单位为毫秒，三个预定义值 - slow|normal|fast
callback - 当动画执行完毕后执行的函数
2、滑动效果
①slideUp() - 向上滑动
可以不传递参数 - 底层具有默认时长，执行的效果依然具有动画效果参数speed - 设置动画执行的时长,单位为毫秒，三个预定义值 - slow|normal|fastcallback - 当动画执行完毕后执行的函数$("div").slideDown(3000);
②slideDown() - 向下滑动
可以不传递参数 - 底层具有默认时长，执行的效果依然具有动画效果参数speed - 设置动画执行的时长,单位为毫秒，三个预定义值 - slow|normal|fastcallback - 当动画执行完毕后执行的函数
3、淡入淡出
①fadeIn() - 淡入
可以不传递参数 - 底层具有默认时长，执行的效果依然具有动画效果参数speed - 设置动画执行的时长,单位为毫秒，三个预定义值 - slow|normal|fastcallback - 当动画执行完毕后执行的函数$("button:first").click(function()\{$("div").fadeIn(3000);$("div").fadeOut(3000);\});
②fadeOut() - 淡出
可以不传递参数 - 底层具有默认时长，执行的效果依然具有动画效果参数speed - 设置动画执行的时长,单位为毫秒，三个预定义值 - slow|normal|fastcallback - 当动画执行完毕后执行的函数
③fadeTo() - 将当前元素从透明度一个值到另一个值
4、自定义动画
① animate(params,duration,easing,callback)
params - 设置动画样式(CSS属性)duration - 设置动画执行时长,单位为毫秒callback - 动画执行完毕后的函数easing - 要使用的擦除效果的名称(不使用)
②并发效果 - 多个动画效果同时执行
animate(\{attrName1 : attrValue1,attrName2 : attrValue2,...\},time);
③排队效果 - 多个动画效果按照先后顺序执行 animate({attrName:attrValue},time).animate({attrName:attrValue},time).animate({attrName:attrValue},time)…
④例：并发效果，一起执行
$(“div”).animate({
“width” : 50,
“height” : 50
},3000);
排队效果 - 按照先后顺序执行
$(“div”).animate({
“width” : 50
},3000).animate({
“height” : 50
},3000).animate({
“left” : 200
},3000);
切换动画toggle() - show()+hide() [jquery 1.9][]后不能再使用slideToggle() - slideUp()+slideDown()
例、function move(){
$(“div”).slideToggle(3000,function(){
move();
});
}
move();
5、类(似)数组操作 - jQuery对象是数组对象
属性：length - 获取当前数组的长度(当前jQuery对象包含多少个DOM对象)方法get(index) - 根据角标返回DOM对象eq(index) - 根据角标返回DOM对象:eq()选择器的作用一致index(obj) - 根据DOM对象返回对应角标隐式迭代概念隐式迭代 - jQuery的遍历在遍历的过程中,只关注入口和出口
var arr = [];// 数组就是入口
for(var i=0;i<arr.length;i++){
var ele = arr\[i\];// 数组的每个元素就是出口
}
显式迭代 - 例如for循环在遍历的过程中,从开始到结束控制遍历的所有过程jQuery的遍历$().each(callback) - 对象方法$.each(obj,callback) - 全局函数
男娘i
「爱情、让人受尽委屈。」
深藏阁楼爱情的钟
还没有评论，来说两句吧...