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;

转载于:https://www.cnblogs.com/xiukang/p/8968193.html