jQuery可以用来制作动画。参考资料为jQuery API中文文档。
分类简介:
基本动画
show
显示隐藏的匹配元素,如果元素可见,则不改变任何东西。这个方法对通过hide隐藏的或是display:none;
都有效。
使用方法:show([speed,[easing],[fn]])
;speed表示单位为毫秒的动画时长,可为竖直也可为slow、normal、fast。fn为动画完成时的执行函数,每个元素执行一次,easing用来指定切换效果,默认为swing,可用参数linear。若不使用参数则直接显示,无动画效果。
$(".box").show(1000,function(){
$(this).text("显示完成");
})
hide
隐藏显示的元素,若已隐藏则无改变。使用方法及参数同show。
$(".box").hide(4000,function(){
alert("元素已隐藏");
})
toggle
用于绑定两个或多个时间处理器函数,以响应被选元素的轮流的click事件。元素为可见的就切换为隐藏,反之相反。使用方法及参数同show。
$("button").click(function(){
$(".box").toggle(1000,function(){
alert("abc");
});
})
滑动
slideDown
向下增大,动态的显示所有匹配的元素,在显示完成后可选的触发一个回调函数,只调整元素的高度,使匹配的元素以滑动形式显示出来。在jQuery1.3中上下的padding和margin也有动画
使用方法:slideDown([speed],[easing],[fn])
参数分别对应动画时长,动画完成时的执行函数,每个动画只执行一次。以及切换效果,默认为swing。
$("button").click(function(){
$(".box").slideDown(2000);
})
slideUp
通过高度变化动态的隐藏所有匹配的元素。其他属性及使用方法同slidedown。
$("button").click(function(){
$(".box").slideUp(2000);
})
slideToggle
通过高度变化来切换可见性,其他属性及效果同slideup。
$("button").click(function(){
$(".box").slideToggle(2000);
})
淡入淡出
fadeIn
通过不透明度变化来实现所有匹配元素的淡入效果,动画完成后可选的触发一个回调函数,这个动画只调整元素的不透明度,对其高度和宽度无影响。
使用方法:fadeIn([speed],[easing],[fn])
,参数解释同show。
$("button").click(function(){
$(".box").fadeIn(1000,function(){
$(this).text("我出来啦!");
});
});
fadeOut
通过不透明度变化来实现所有匹配元素的淡出效果,动画完成后可选的触发一个回调函数,这个动画只调整元素的不透明度,对其高度和宽度无影响。
使用方法:fadeIn([speed],[easing],[fn])
,参数解释同show。
$("button").click(function(){
$(".box").fadeOut(1000);
});
fateTo
不论元素原来是显示还是隐藏,把所有匹配元素的不透明度以渐进方式调整到指定的不透明度。
使用方法:fadeTo([[speed],opacity,[easing],[fn]]),其中opacity为一个0-1之间的一个表示透明度的数字,其他参数解释见show。
$("button").click(function(){
$(".box").fadeTo(1000,0.4,function(){
$(this).text("我出来啦!");
});
});
fadeToggle
通过不透明度变化来开关所有匹配元素的淡入淡出效果。
$("button").click(function(){
$(".box").fadeToggle(1000,function(){
$(this).text("我出来啦!");
});
});
自定义动画
animate
用于创建自定义动画。所有指定属性都必须用骆驼形式,如:marginLeft等。
使用方法:animate(params,[speed],[easing],[fn])
第一个参数是作为动画属性和中值样式属性和其值的集合。
//点击按钮,盒子平移
$("button").click(function(){
$(".box").animate({left:"+50px"
},1000);
})
//点击按钮,盒子变化
$("button").click(function(){
$(".box").animate({
width:300,
height:300,
borderWidth:10
},1000)
})
delay
设置一个延迟来推迟队列中之后的项目,可推迟动画队列的执行,也可以用于自定义队列。
使用方法:delay(duration,[queueName])
其中duration是延迟的时间,第二个参数默认为fx,是动画队列。
$(".btn1").click(function(){
$(".box1").slideUp(3000);
$(".box").slideUp(1000).delay(1000).fadeIn(1000);
})
stop
停止在所有元素上正在运行的动画,如果队列中有等待执行的动画,将立即被执行。
使用方法:stop([clearQueue],[jumpToEnd])
clearQueue:如果为true,则清空队列。可以立即结束动画。
jumpToEnd:让当前正在执行的动画立即完成,并且重设show和hide的原始样式,调用回调函数等。如果要停止单个的对象的动画,则在第一个参数的位置写上要停止的动画队列名字。
代码 | 解释 |
---|---|
stop(true,true); | 清空队列,立即结束所有队列里的动画,立即完成动画 |
stop(true,false); | 清空队列,立即结束动画,停止在动画完成的进度那里 |
stop(false,true); | 跳过当前动画,直接跳到其最终结果,执行下一个动画 |
stop(false,false); | 跳过当前动画,直接停止在这个时候的效果,执行下一个动画 |
stop(false); | 等价于stop(false,false): |
stop(true); | 等价于stop(true,false): |
stop(); | 等价于stop(false,false): |
$(".btn1").click(function(){
$(".box").animate({left:"+200px"
},3000);
$(".box1").fadeTo(3000,0.1)
})
$(".btn2").click(function(){
$("div").stop(true);
})
finish
停止当前正在运行的动画,删除所有排队的动画,并完成匹配元素所有的动画。通俗来说就是停止动画运行,直接展示最终结果。
使用方法:finish( [queue ] );
与stop(true,true);
很像,都是清除队列,并且让动画跳转到最终值。但是finish会导致所有排队的动画的css属性跳转到其最终值。而stop只结束队列里的动画。
设置
jQuery.fx.off
关闭页面上所有的动画。把这个属性设置为true可以立即关闭所有动画(所有效果会立即执行完毕)。当把这个属性设成false之后,可以重新开启所有动画。
一般在这些情况时使用:在配置比较低的电脑上使用jQuery,或者由于动画效果而遇到了 可访问性问题
$(".btn1").click(function(){
$(".box1").slideUp(3000);
$(".box").slideUp(1000).delay(1000).fadeIn(1000);
})
jQuery.fx.off=true;//停止动画,但是延迟和执行效果都是有的
jQuery.fx.off=false;//重启动画