jQuery 停止() 方法

jQuery 中的stop()方法用於停止選定元素上當前正在執行的動畫。

此方法停止選定元素上的動畫，它可以清除動畫佇列，防止任何排隊的動畫執行。根據傳遞的引數，可以選擇跳到動畫的末尾。

語法

以下是 jQuery 中 stop() 方法的語法：

$(selector).stop(stopAll,goToEnd)

引數

此方法接受以下可選引數：

stopAll (可選): 一個布林值，指示是否停止選定元素上的排隊動畫。預設為"false"。
goToEnd (可選): 一個布林值，指示是否透過跳轉到末尾立即完成當前動畫。預設為"false"。

示例 1

以下示例演示如何使用 stop() 方法停止當前正在執行的動畫：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
      $("#startBtn").click(function(){
          $("div").animate({height: 200}, 2000);
          $("div").animate({width: 200}, 2000);
      });
      $("#stopBtn").click(function(){
        $("div").stop();
      });
  });
  </script>
</head>

<body>
<button id="startBtn">Start</button>
<button id="stopBtn">Stop</button>
<div style="background:#40a944; height:100px; width:100px"></div>
</body>
</html>

動畫佇列中有兩個動畫。當我們點選“開始”按鈕時，佇列中的第一個動畫（高度）將開始，如果我們點選“停止”按鈕，第一個正在執行的動畫將停止，第二個動畫將立即開始。

示例 2

以下示例演示如何使用 stop() 方法停止排隊的動畫。為此，我們需要像下面那樣向 stop() 方法提供“stopAll”引數：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
      $("#startBtn").click(function(){
          $("div").animate({height: '400'}, 1000);
          $("div").animate({width: '400'}, 1000);
          $("div").animate({height: '200'}, 1000);
          $("div").animate({width: '200'}, 1000);
      });
      $("#stopBtn").click(function(){
          $("div").stop(true);
      });
  });
  </script>
</head>

<body>
<button id="startBtn">Start</button>
<button id="stopBtn">Stop</button>
<div style="background:#40a944; height:100px; width:100px;"></div>
</body>
</html>

佇列中有 4 個動畫。當我們點選“開始”按鈕時，第一個動畫（高度）將開始，如果我們點選“停止”按鈕，佇列中的下一個動畫將不會開始。

示例 3

以下示例演示如何使用 stop() 方法立即完成所有動畫：

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
      $("#startBtn").click(function(){
          $("div").animate({height: '400'}, 1000);
          $("div").animate({width: '400'}, 1000);
          $("div").animate({height: '200'}, 1000);
          $("div").animate({width: '200'}, 1000);
      });
      $("#stopBtn").click(function(){
          $("div").stop(true, true);
      });
  });
  </script>
</head>

<body>
<button id="startBtn">Start</button>
<button id="stopBtn">Stop</button>
<div style="background:#40a944; height:100px; width:100px;"></div>
</body>
</html>

佇列中有 4 個動畫。當我們點選“開始”按鈕時，第一個動畫將開始。如果我們點選“停止”按鈕，第一個動畫將完成並結束。第二個、第三個和第四個動畫也是如此。

jquery_ref_effects.htm

列印頁面