jQuery动画
显示隐藏动画
- 显示动画show( )
- 隐藏动画hide( )
- 切换动画toggle( )
show/hide/toggle(时间,结束时的回调函数)
展开收起动画
- 展开slideDown( )
- 收起slideUp( )
- 切换slideToggle( )
slideDown/slideUp/slideToggle(时间,结束时的回调函数)
淡入淡出动画
- 淡入fadeIn( )
- 淡出fadeOut( )
- 切换fadeToggle( )
- 淡入到fadeTo( )
fadeIn/fadeOut/fadeToggle(时间,结束时的回调函数)
fadeTo(时间,淡入到的透明度,结束时的回调函数 )
自定义动画
animate(对象,时间,动画执行方式,回调函数)
- 对象:{属性:值,属性:值}
- 时间:加入动画队列的时间
- 动画执行方式:默认swing(匀速),linear(先慢后快再慢)
- 回调函数:动画执行结束之后执行
animate操作属性
class为box1的div会匀速向右运动
$(".box1").animate({marginLeft:500},2000,“linear”);
class为box2的div会缓速向右运动
$(".box2").animate({marginLeft:500},2000,“swing”);
animate累加属性
每次点击按钮,class为box1的div宽度会加100px
$(“button”).click(function()
{
$(".box1").animate({width:"+=100"},500);
})
animate使用关键字
关键字:hide隐藏,toggle切换显示隐藏等等
每次点击按钮class为box1的div都会切换显示隐藏
$(“button”).click(function()
{
$(".box1").animate({width:“toggle”},500);
})
stop( )和delay( )
- 停止动画stop( )
- 延时delay( )
delay(时间)
stop(清空队列,完成队列)
stop(第一个参数,第二个参数)
第一个参数:true:清空 false:不清空
第二个参数: true:完成 false:不完成
$(“div”).stop(true); //当前停止,后续也停止
$(“div”).stop(false); //当前停止,后续不停止
$(“div”).stop(true,false); //当前停止,后续也停止
$(“div”).stop(true,true); //当前停止并立即执行完毕,后续停止
$(“div”).stop(false,true); //当前停止并立即执行完毕,后续不停止
$(“div”).stop(false,false); //当前停止,后续不停止