.stop()

类别：效果 > 自定义

.stop( [clearQueue ] [, jumpToEnd ] )返回类型：jQuery

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

  • 增补版本：1.2.stop( [clearQueue ] [, jumpToEnd ] )

    • clearQueue (默认值： false)
      类型：Boolean
      一个布尔值，指示是否同时删除队列的动画。默认为false。
    • jumpToEnd (默认值： false)
      类型：Boolean
      一个布尔值，指示是否立即完成当前的动画。默认为false。

  • 增补版本：1.7.stop( [queue ] [, clearQueue ] [, jumpToEnd ] )

    • queue
      类型：String
      要停止动画的队列的名称。
    • clearQueue (默认值： false)
      类型：Boolean
      一个布尔值，指示是否同时删除队列的动画。默认为false。
    • jumpToEnd (默认值： false)
      类型：Boolean
      一个布尔值，指示是否立即完成当前的动画。默认为false。

当在一个元素上调用.stop()时，当前正在运行的动画（如果有的话）会立即停止。举个例子，如果一个元素调用.stop()时，正在用.slideUp()隐藏它，此元素将依然显示，但是会处于它的先前的部分高度。不会调用Callback函数。

如果同一个元素上正在调用不止一个动画，后面的动画会被放置到元素的效果队列中。直到第一个动画结束之后，才会开始下一个动画。如果调用了.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();
});

切换动画

自从jQuery 1.7以来，过早地利用.stop()停止一个切换动画将触发jQuery的内部效果跟踪。在先前的版本中，在切换动画之前调用.stop()方法将导致动画失去它的洇的跟踪（如果jumpToEnd是false）。任何后续动画将在一个新的“半路”状态开始，有时候导致元素消失。为了观察这种新行为，请参见下面最后的示例。

可以通过把属性$.fx.off设置为true来全局地停止动画。如果这么做了，所有的动画方法将立即把元素设置到它们的最终状态，而不是显示效果。

示例：

点击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
41
42
43
44
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>stop demo</title>
  <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-1.10.2.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按钮来开始动画，然后在动画完成之前再次点击。动画将切换到与保存的开始点相反的方向。

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
 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>stop demo</title>
  <style>
  .block {
    background-color: #abc;
    border: 2px solid black;
    width: 200px;
    height: 80px;
    margin: 10px;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.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>

演示：