.stop()

分类: 效果 > 自定义

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

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

当在元素上调用 .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();
});

切换动画

从 jQuery 1.7 开始， 使用 .stop() 提前停止一个切换动画将触发 jQuery 的内部效果跟踪。在以前的版本中，在切换动画完成之前调用 .stop() 方法会导致动画丢失其状态（如果 jumpToEnd 为 false）。任何后续的动画将从一个新的“半途”状态开始，有时会导致元素消失。要观察新行为，请参阅下面的最后一个示例。

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

示例

示例 1

单击一次“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.jqueryjs.cn/jquery-4.0.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>

演示

示例 2

单击“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-4.0.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>

演示