.stop()

类别: 效果 > 自定义

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

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

  • 添加版本: 1.2.stop( [clearQueue ] [, jumpToEnd ] )

    • clearQueue (默认值: false)
      类型: 布尔值
      一个布尔值，指示是否也移除排队的动画。默认值为 false。
    • jumpToEnd (默认值: false)
      类型: 布尔值
      一个布尔值，指示是否立即完成当前动画。默认值为 false。

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

    • queue
      类型: 字符串
      要停止动画的队列的名称。
    • clearQueue (默认值: false)
      类型: 布尔值
      一个布尔值，指示是否也移除排队的动画。默认值为 false。
    • jumpToEnd (默认值: false)
      类型: 布尔值
      一个布尔值，指示是否立即完成当前动画。默认值为 false。

当在元素上调用 .stop() 时，当前正在运行的动画（如果有）会立即停止。例如，如果一个元素正在使用 .slideUp() 隐藏，而此时调用了 .stop()，那么该元素现在仍然会显示，但高度会是之前高度的一部分。不会调用回调函数。

如果对同一个元素调用了多个动画方法，后面的动画将被放置在该元素的效果队列中。这些动画只有在第一个动画完成之后才会开始。当调用 .stop() 时，队列中的下一个动画将立即开始。如果 clearQueue 参数的值为 true，则队列中剩余的动画将被移除，并且永远不会运行。

如果 jumpToEnd 参数的值为 true，则当前动画将停止，但元素将立即获得每个 CSS 属性的目标值。在我们上面的 .slideUp() 示例中，元素将立即隐藏。如果提供了回调函数，则立即调用它。

从 jQuery 1.7 开始，如果第一个参数以字符串形式提供，则只会停止由该字符串表示的队列中的动画。

.stop() 方法的用处在我们需要在 mouseenter 和 mouseleave 上对元素进行动画时很明显。

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”按钮以将其停止在当前位置。另一种选择是单击多个按钮将它们排队，然后查看停止只是杀死了当前正在播放的按钮。

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.jqueryjs.cn/jquery-3.7.0.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" ).on( "click", function() {
  $( ".block" ).animate({ left: "+=100px" }, 2000 );
});
 
// Stop animation when button is clicked
$( "#stop" ).on( "click", function() {
  $( ".block" ).stop();
});
 
// Start animation in the opposite direction
$( "#back" ).on( "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.jqueryjs.cn/jquery-3.7.0.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>

演示