返回值:jQuerystop([clearQueue], [jumpToEnd])

停止匹配元素上正在运行的动画。

当在元素上调用 .stop() 时，该元素上正在执行的动画（如果有的话）会立刻停止。如果正在对某一元素使用 .slideUp() 动画进行元素隐藏，那么在动画执行过程中（即元素尚未被完全隐藏时），调用 .stop() 时，该元素依然会有一部分是处于显示状态的。由于元素上的动画尚未执行完成，所以动画完成时执行的回调函数是不会被调用的。

如果在同一元素上调用了多个动画，那么尚未被执行的动画会被放到队列中。直到前面的动画执行完，否则队列中的剩余动画是不会以被执行的。当调用了 .stop()，队列中的下一个动画会立刻被执行。如果提供了 clearQueue 参数且参数值是 true，那么队列中其它的动画会被移除，并且永远不会被执行。

如果提供了 jumpToEnd 参数且参数值是 true，那么当前正在执行的动画会立刻变成动画结束状态，即该元素上的 CSS 属性会被立刻修改成动画的目标值。拿上面提到的 .slideUp() 例子来说，这意味着元素会被立刻隐藏，如果提供了回调函数的话，那么该回调函数也会被立刻调用。

从 jQuery 1.7 开始,如果提供了 queue 参数，那么只有该参数所表示的队列中的动画才会被停止。

适用 .stop() 方法的地方是显而易见的。比如说，若要在一个元素的 mouseenter 和 mouseleave 时执行动画，首先应该立刻停止该元素上正在进行的动画。例如： 

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

我们可以采用链式方法，在 .stop(true, true) 后添加一个漂亮的淡入淡出效果，而不会产生由于队列中含有多个动画而带来的常见问题： 

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

切换动画（Toggling Animations）

从 jQuery 1.7 开始， 如果使用 .stop() 过早的停止了可切换的动画(toggled animation)，会触发 jQuery 内部的动画跟踪。在早先的版本中，如果在切换动画完成之前，调用了 .stop() 方法，会导致动画状态的丢失(如果 jumpToEnd 参数是 false 的话）。此时，任何后续动画将从状态 "half-way" 开始执行，有时这会导致元素消失。要想观察这种行为，请参阅下面最后一个例子。

通过将全局属性 $.fx.off 设置成 true，就可以停止所有动画，此时所有的动画元素会被设置成动画的最终状态，而不是显示一个动画。

示例:

点击 Go 按钮，立刻开始执行动画。然后点击 STOP 按钮，动画元素会在它所在的位置停下来。另外一种测试方法时，多次点击不同的动画按钮，此时尚未被执行的动画会被添加到动画队列中，而后再点击 STOP 按钮，则会立刻停止当前的动画，继续执行队列中的其它动画。

<!DOCTYPE html>
<html>
<head>
<style>div { 
position: absolute; 
background-color: #abc;
left: 0px;
top:30px;
width: 60px; 
height: 60px;
margin: 5px; 
}
</style>
<script src="jquery.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>

演示:

示例:

点击 slideToggle 按钮，会开始动画。然后在动画结束前再次点击该按钮，此时，会立刻从当前位置向反方向开始动画。

<!DOCTYPE html>
<html>
<head>
<style>.block { 
background-color: #abc;
border: 2px solid black;
width: 200px; 
height: 80px;
margin: 10px;
}
</style>
<script src="jquery.min.js"></script>
</head>
<body>

<button id="toggle">slideToggle</button> 
<div class="block"></div>

<script>


var $block = $('.block');
/* Toggle a sliding animation animation */
$('#toggle').on('click', function() {
    $block.stop().slideToggle(1000);
});


</script>
</body>
</html>

演示: