# .stop()

所属分类：特效 > 自定义 英文文档：.stop()

## .stop( [clearQueue ] [, jumpToEnd ] )返回: jQuery

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

- #### 添加的版本: 1.2.stop( [clearQueue ] [, jumpToEnd ] )

  - clearQueue
    类型: Boolean
    一个布尔值，指示是否取消以列队动画。默认 `false`.
  - jumpToEnd
    类型: Boolean
    一个布尔值指示是否当前动画立即完成。默认`false`.

- #### 添加的版本: 1.7.stop( [queue ] [, clearQueue ] [, jumpToEnd ] )

  - queue
    类型: String
    停止动画队列的名称。
  - clearQueue
    类型: Boolean
    一个布尔值，指示是否取消以列队动画。默认 `false`.
  - jumpToEnd
    类型: Boolean
    一个布尔值指示是否当前动画立即完成。默认`false`.

当一个元素调用`.stop()`，当前正在运行的动画（如果有的话）立即停止。如果，例如，一个元素用`.slideUp()`隐藏的时候，调用`.stop()`，该元素依然会有一部分是处于显示状态的。由于元素上的动画尚未执行完成，所以动画完成时执行的回调函数是不会被调用的。

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

如果提供`jumpToEnd`参数，并且值为`true`时，当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值。用上面的`.slideUp()`为例子,该元素将立即隐藏。如果提供回调函数将立即被调用。

从jQuery 1.7开始, 如果第一个参数是一个字符串， 那么只有该参数所表示的队列中的动画才会被停止。

当我们需要对元素做`mouseenter`和`mouseleave`动画时，`.stop()`方法明显是有效的：

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

我们可以创建一个不错的淡入效果，使用`.stop(true, true)`链式调用无须排队：

1 2 3 4 5 |
    $('#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()` 过早地停止切换动画将触发jQuery的内部效果跟踪。在早先的版本中，如果在切换动画完成之前，调用了 `.stop()` 方法，会导致动画状态的丢失(如果 jumpToEnd 参数是 false 的话）。此时，任何后续动画将从状态 "half-way" 开始执行，有时这会导致元素消失。要想观察这种行为，请参阅下面最后一个例子。

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

## 例子:

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
    <!DOCTYPE html><html><head>  <style>div {position: absolute;background-color: #abc;left: 0px;top:30px;width: 60px;height: 60px;margin: 5px;}</style>  <script src="https://code.jquery.com/jquery-latest.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:

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
    <!DOCTYPE html><html><head>  <style>.block {background-color: #abc;border: 2px solid black;width: 200px;height: 80px;margin: 10px;}</style>  <script src="https://code.jquery.com/jquery-latest.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>

#### Demo: