jQuery自动义动画animated()

本文由清尘发表于2012-01-04 01:49最后修改于2014-04-25属于jQuery分类

jQuery停止动画和判断是否处于动画状态:
1.停止元素的动画
如果需要在某处停止动画,需要使用stop()方法。stop()方法的语法结构为:

stop([clearQueue][,gotoEnd]);
参数clearQueue和gotoEnd都是可选的参数,为Boolean值(ture或flase)。clearQueue代表是否要清空未执行的动画队列,gotoEnd代表是否直接将正在执行的动画跳转到末状态。
如果直接使用stop()方法,则会立即停止当前正在进行的动画,如果接下来还有动画等待继续进行,则以当前状态开始接下来的动画。
stop()方法会结束当前正在进行的动画,并立即执行队列中的下一个动画。可以通过stop(false,true)这种方式来让当前动画直接到达末状态。
jQuery只能设置正在执行的动画的最终状态,而没有提供直接到达未执行动画队列最终状态的方法。例如有一组动画:
$(“div.content”).animate({width:”300″},200).animate({height:”150″},300).animate({opacity:”0.2″},2000); 
无论怎么设置stop()方法,均无法在改变width或者height时,将此<div>元素的末状态变成300X150的大小,并且设置透明度 为0.2.
2.判断元素是否处于动画状态
判断元素是否正处于动画状态,如果元素不处于动画状态,才为元素添加新的动画,否则不添加。代码如下:
if(!$(element).is(“:animated”)){//判断元素是否正处于动画状态
    //如果当前没有进行动画,则添加新动画
}
3.动画队列
(1)一组元素上的动画效果
    当在一个animate()方法中应用多个属性时,动画是同时发生的。
    当以链式的写法应用动画方法时,动画是按照顺序发生的。
(2)多组元素上的动画效果
    默认情况下,动画都是同时发生的。
当以回调的形式应用动画方式时,动画是按照回调顺序发生的。
注意在动画方法中,其它非动画方法会插队,例如css()方法要使非动画方法也按照顺序执行,需要把这些方法写在动画方法的回调函数中。