當前位置: 首頁>>代碼示例 >>用法及示例精選 >>正文

JQuery .stop()用法及代碼示例


用法 
.stop(  [clearQueue ] [, jumpToEnd ] ) => jQuery

說明：停止匹配元素上的currently-running 動畫。

  • 添加的版本：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() 時，會立即停止currently-running 動畫(如果有)。例如，如果在調用 .stop() 時使用 .slideUp() 隱藏元素，則該元素現在仍將顯示，但將是其先前高度的一小部分。不調用回調函數。

如果在同一個元素上調用了多個動畫方法，則後麵的動畫將放置在該元素的效果隊列中。在第一個動畫完成之前，這些動畫不會開始。當調用.stop() 時，隊列中的下一個動畫立即開始。如果為 clearQueue 參數提供了 true 的值，則隊列中的其餘動畫將被刪除並且永遠不會運行。

如果為 jumpToEnd 參數提供了 true 的值，則當前動畫將停止，但該元素會立即為每個 CSS 屬性提供其目標值。在我們上麵的.slideUp() 示例中，該元素將立即被隱藏。然後立即調用回調函數(如果提供)。

從 jQuery 1.7 開始，如果第一個參數作為字符串提供，則隻有由該字符串表示的隊列中的動畫才會停止。

當我們需要為 mouseenter 和 mouseleave 上的元素設置動畫時，.stop() 方法的用處顯而易見：

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

我們可以通過將.stop(true, true) 添加到鏈中來創建一個很好的淡入淡出效果，而不會出現多個排隊動畫的常見問題：

$( "#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 為假)。任何後續動畫都將從新的 "half-way" 狀態開始，有時會導致元素消失。要觀察新行為，請參見下麵的最後一個示例。

可以通過將屬性 $.fx.off 設置為 true 來全局停止動畫。完成此操作後，所有動畫方法都會在調用時立即將元素設置為其最終狀態，而不是顯示效果。

例子：

單擊 Go 按鈕一次以啟動動畫，然後單擊 STOP 按鈕將其停止在當前位置。另一種選擇是單擊幾個按鈕將它們排隊，然後看到停止隻會殺死當前正在播放的按鈕。

<!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.5.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" ).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 按鈕開始動畫，然後在動畫完成之前再次單擊。動畫將從保存的起點切換到另一個方向。

<!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.5.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>

演示：

相關用法


注：本文由純淨天空篩選整理自jquery.com大神的英文原創作品 .stop()。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。