jQuery 动画
动画效果
slideDown(100)下到上显示
slideToggle(100)上到下显示
slideUp(100)上到下隐藏
fadeIn(100)淡淡显示
fadeOut(100)淡淡显示
fadeToggle()自动切换
hide(100)右下角隐藏
show(100)左上角显示
animate({},100)自定义动画
fast 200毫秒
slow 600毫秒
默认400毫秒
toggle判断
stop()取消动画效果
列队动画方法
使用回调函数,强行将.css()方法排队到.slideDown()之后
$('#box').slideUp('slow').slideDown('slow',function(){
$(this).css('background','orange');
});
使用.queue()方法模拟动画方法跟随动画方法之后
$('#box').slideUp('slow').slideDown('slow').queue(function(){
$(this).css('background','orange');
});
使用 next 参数来实现继续调用列队动画
$('#box').slideUp('slow').slideDown('slow').queue(function(next){
$(this).css('background','orange');
next();
}).hide('slow');
使用顺序调用的列队,逐个执行,非常清晰
$('#box').slideUp('slow');
$('#box').slideDown('slow');
$('#box').queue(function(){
$(this).css('background','orange');
$(this).dequeue();
})
$('#box').hide('slow');
获取当前列队的长度,fx 是默认列队的参数
functioncount(){
return$("#box").queue('fx').length;
}
在某个动画处调用
$('#box').slideDown('slow',function(){alert(count());});
清理动画列队
$('#box').slideDown('slow',function(){$(this).clearQueue()});
动画相关方法
强制停止运行中的
stop(true,true);
第一个参数表示是否取消列队动画,默认为 false。如果参数为 true,当有列队动 画的时候,会取消后面的列队动画。
第二参数表示是否到达当前动画结尾,默认为 false。 如果参数为 true,则停止后立即到达末尾处。
动画全局属性
设置运行帧数为1000毫秒 默认为 13
$.fx.interval=1000;
设置动画为关闭 true 默认为 false
$.fx.off=true;
上一篇: tab切换
下一篇: 三文鱼需要蒸多久才熟