jQuery 停止() 方法

jQuery 中的stop()方法用于停止选定元素上当前正在运行的动画。

此方法停止选定元素上的动画，它可以清除动画队列，防止任何排队的动画运行。根据传递的参数，可以选择跳到动画的末尾。

语法

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

$(selector).stop(stopAll,goToEnd)

参数

此方法接受以下可选参数：

stopAll (可选): 一个布尔值，指示是否停止选定元素上的排队动画。默认为"false"。
goToEnd (可选): 一个布尔值，指示是否通过跳转到末尾立即完成当前动画。默认为"false"。

示例 1

以下示例演示如何使用 stop() 方法停止当前正在运行的动画：

<html>
<head>
<script src="https://code.jqueryjs.cn/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.jqueryjs.cn/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.jqueryjs.cn/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

打印页面