jquery的animation会自动进入队列,就出现了一个问题,这些动画会一一执行完成,而我们实际的本意是当鼠标移开的时候动画即终止。
停止元素的动画方法:stop()
语法结构:stop([clearQueue],[gotoEnd])
clearQueue 和 gotoEnd 都为可选参数,为布尔值。
clearQueue : 是否要清空未执行玩的动画列表
gotoEnd : 是否直接将正在执行的动画跳转到末状态
经常在hover时间的动画效果里用到 stop() 方法,可以避免动画效果与光标动作不一致时导致的延迟动画。
例如:
1
2
3
4
5
6
7
|
$( ".test" ).hover( function (){ $( this ).stop() .animate({height: "150" , "300" },200); }, function (){ $( this ).stop() .animate({height: "50" , "100" },3200); }); |
判断元素是否处于动画状态:
1
2
3
|
if (! $(elememt).is( ":animated" ) ){ //判断元素是否处于动画状态 //如果当前没有进行动画,则添加 } |