.stop()

類別： 效果 > 自訂

.stop( [clearQueue ] [, jumpToEnd ] )傳回： jQuery

說明： 停止目前在匹配元素上執行的動畫。

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

    • clearQueue（預設：false）
      類型： 布林值
      布林值，表示是否移除排隊的動畫。預設為 false。
    • jumpToEnd（預設：false）
      類型： 布林值
      布林值，表示是否立即完成目前的動畫。預設為 false。

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

    • 佇列
      類型：字串
      要停止動畫的佇列名稱。
    • clearQueue（預設：false）
      類型： 布林值
      布林值，表示是否移除排隊的動畫。預設為 false。
    • jumpToEnd（預設：false）
      類型： 布林值
      布林值，表示是否立即完成目前的動畫。預設為 false。

當對元素呼叫 .stop() 時，目前執行的動畫（如果有）會立即停止。例如，當呼叫 .stop() 時，如果元素正使用 .slideUp() 隱藏，該元素仍會顯示，但只會顯示先前高度的一小部分。不會呼叫回呼函式。

如果對同一個元素呼叫多個動畫方法，後面的動畫會放置在該元素的效果佇列中。這些動畫會等到第一個動畫完成才會開始。當呼叫 .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
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-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>

示範

按一下「切換滑動」按鈕以開始動畫，然後在動畫完成前再按一次。動畫會從儲存的起始點切換到另一個方向。

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-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>

示範