jQuery stop()方法

当我们使用jQuery时，经常会出现需要停止动画或效果的情况。这时候就可以使用stop()方法了。

前置知识

在深入了解stop()方法之前，需要先了解一下jQuery中的动画队列、动画链、以及动画速度。

队列(queue)： 在jQuery中，每个元素都有一个对应的队列(queue)，将要执行的动画就会被存储在这个队列中。当动画效果被删除后，这个队列就可以重新开始执行新的效果。

链(Chaining)： 在jQuery中，链(chain)指的是多个动画序列连接在一起，通过链式操作来执行。例如：

$("p").hide().show().slideUp().slideDown();

这条代码通过链式调用四个不同的动画方法，一个接一个地执行。

速度(speed)： 在jQuery中，速度(speed)指的是动画的执行速度，可以使用预设值或者自定义的数值来指定。

stop()方法

stop()方法用于停止当前动画，或者停止当前动画以及该元素之后的动画。停止后，元素会立即到达动画后的状态。

stop()方法可以带有两个参数，第一个参数用于指定是否清空队列，默认为false; 第二个参数用于指定是否到达动画的最终状态，默认为false。

$(selector).stop(clearQueue,jumpToEnd);

clearQueue: 布尔型，是否清空队列，默认为false，即保留动画队列。
jumpToEnd: 布尔型，是否到达动画的最终状态，默认为false，即不跳过动画。

示例说明

示例1

在这个例子中，我们创建了一个div元素，当该元素被单击时，将会动画地向右移动200像素，当再次单击时停止当前动画。

<!DOCTYPE html>
<html>
<head>
  <title>stop()方法</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style>
    #myDiv {
      width: 100px;
      height: 100px;
      background-color: red;
      margin: 20px;
      position: relative;
    }
  </style>
</head>
<body>
  <div id="myDiv"></div>
  <script>
    $(document).ready(function () {
      $("#myDiv").click(function () {
        $(this).animate({
          left: "200px"
        }, 2000);
      });

      $("#myDiv").click(function () {
        $(this).stop();
      });
    });
  </script>
</body>
</html>

在这个例子中，我们首先创建了一个div元素，并且在document被加载后，为该元素绑定了单击事件监听器。在该事件监听器中，我们使用animate()方法来使该元素向右移动200像素，且移动花费2000ms的时间。

接下来，我们为该元素绑定了第二次单击事件监听器，在该事件监听器中，我们调用stop()方法，这样该元素就会立即停止动画。

示例2

在这个例子中，我们创建了两个按钮，一个用于开始动画，另一个用于停止当前动画或者清空动画队列，并且添加了事件监听器。

<!DOCTYPE html>
<html>
<head>
  <title>stop()方法</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style>
    #myDiv {
      width: 100px;
      height: 100px;
      background-color: red;
      margin: 20px;
      position: relative;
    }
  </style>
</head>
<body>
  <div id="myDiv"></div>
  <button id="start">开始动画</button>
  <button id="stop">停止或清空动画</button>

  <script>
    $(document).ready(function () {
      var stopMe = false;
      $("#start").click(function () {
        if (stopMe == false) {
          $("#myDiv").animate({
            left: "200px"
          }, 2000);
          stopMe = true;
        }
      });

      $("#stop").click(function () {
        $("#myDiv").stop(true);
        stopMe = false;
      });
    });
  </script>
</body>
</html>

在这个例子中，我们首先创建了一个div元素和两个按钮，其中第一个按钮用于开始动画，第二个按钮用于停止或清空动画队列。

在document被加载后，我们首先为第一个按钮绑定了单击事件监听器。在该事件监听器中，我们先使用一个stopMe变量来判断当前动画是否在运行。如果动画没有在运行，则使用animate()方法来使该元素向右移动200像素，且移动花费2000ms的时间，并将stopMe变量设置为true。

接下来，我们为第二个按钮绑定了单击事件监听器，在该事件监听器中，我们先使用stop()方法来停止当前动画，因为按钮被单击代表动画暂停或停止，所以我们需要确保停止了当前动画。如果需要清空动画队列，则在stop()方法中传入一个true的参数，这样当前动画就会被停止并且队列中的所有动画都会被清空。最后，我们需要将stopMe变量设置为false，因为动画已经停止了。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery stop()方法 - Python技术站

前置知识

stop()方法

示例说明

示例1

示例2

相关文章