在使用jQuery的.animate()的时候经常会遇到鼠标重复划过导致动画重复播放的问题。
这个时候就要用到stop([clearQueue], [gotoEnd])来阻止重复动画。
那么如何科学使用stop()来阻止重复动画呢?下面就举五个例子。



例1:无stop()的情况下:

$(this).animate();


  •  
  •  
  •  

如例子所示,在没有stop()的情况下,会随着鼠标划过的次数进行重复动画。



例2:stop(false, false)或者stop()

$(this).stop().animate();


  •  
  •  
  •  

默认为false,可以看到鼠标离开的一瞬间动画停止,但因为 [clearQueue]也是flase,所以会直接进入了下一步动画。动画的重复也仍旧还在。



例3:stop(false, true)

$(this).stop(false, true).animate();


  •  
  •  
  •  

[gotoEnd]为true,所以当鼠标离开后直接触发了最后的状态,然后直接运行了下面的高度变化的动画。但仍旧会重复动画。



例4:stop(true, false)

$(this).stop(true, false).animate();


  •  
  •  
  •  

[gotoEnd]为false,所以鼠标移开的一瞬间动画直接停止。同时 [clearQueue]为true,所以本应该执行的下一步高度变化的动画直接被清除,直接跳转播放鼠标移开后的动画。



例5:stop(true, true)

$(this).stop(true, true).animate();


  •  
  •  
  •  

两个值都为true的情况下,鼠标移开后动画直接播放到最终状态,同时[clearQueue]为true,所以本应该执行的下一步高度变化的动画直接被清除,直接跳转播放鼠标移开后的动画。



参考网址:http://www.kantenna.com/pg/2010/01/jqueryjquery_stop.php