.stop()

.stop( [ clearQueue ], [ jumpToEnd ] ) 官网原E文: jQuery

描述: 停止匹配元素当前正在运行的动画。

  • version added: 1.2.stop( [ clearQueue ], [ jumpToEnd ] )

    clearQueue一个布尔值,指示是否取消以列队动画。默认 false

    jumpToEnd 一个布尔值指示是否当前动画立即完成。默认false.

当一个元素调用.stop(),当前正在运行的动画(如果有的话)立即停止。如果,例如,一个元素用.slideUp()隐藏的时候.stop()被调用,元素现在仍然被显示,但将是先前高度的一部分。不调用回调函数。

如果同一元素调用多个动画方法,后来的动画被放置在元素的效果队列中。这些动画不会开始,直到第一个完成。当调用.stop()的时候,队列中的下一个动画立即开始。如果clearQueue参数提供true值,那么在队列中的动画其余被删除并永远不会运行。

如果jumpToEnd参数提供true值,当前动画将停止,但该元素是立即给予每个CSS属性的目标值。用上面的.slideUp()为例子,该元素将立即隐藏。如果提供回调函数将立即被调用。

当我们需要对元素做mouseentermouseleave动画时,.stop()方法明显是有效的:

<div id="hoverme">
  Hover me
  <img id="hoverme" src="book.png" alt="" width="100" height="123" />
</div>

我们可以创建一个不错的淡入效果,使用.stop(true, true)链式调用无须排队(We can create a nice fade effect without the common problem of multiple queued animations by adding .stop(true, true) to the chain):

$('#hoverme-stop-2').hover(function() {
  $(this).find('img').stop(true, true).fadeOut();
}, function() {
  $(this).find('img').stop(true, true).fadeIn();
});

可以通过设置属性$.fx.offtrue停止全局的动画 。当这样做,所有动画方法将立即设置元素的最终状态,而不是所谓的显示效果。

例子:

Click the Go button once to start the animation, then click the STOP button to stop it where it's currently positioned. Another option is to click several buttons to queue them up and see that stop just kills the currently playing one.

<!DOCTYPE html>
<html>
<head>
  <style>div { 
position: absolute; 
background-color: #abc;
left: 0px;
top:30px;
width: 60px; 
height: 60px;
margin: 5px; 
}
</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <button id="go">Go</button> 
<button id="stop">STOP!</button>
<button id="back">Back</button>
<div class="block"></div>
<script>
// Start animation
$("#go").click(function(){
$(".block").animate({left: '+=100px'}, 2000);
});

// Stop animation when button is clicked
$("#stop").click(function(){
$(".block").stop();
});

// Start animation in the opposite direction
$("#back").click(function(){
$(".block").animate({left: '-=100px'}, 2000);
});

</script>

</body>
</html>

Demo:

jQuery 1.6 API 中文版Clove整理、修订