jQuery 停止动画

在web前端开发中，动画效果是非常常见的一种交互方式。然而有时候我们需要停止正在进行的动画，这时候就可以使用jQuery提供的stop()方法来实现。

stop()方法的语法

stop()方法用于停止当前正在运行的动画。它有两个可选参数：

• clearQueue：一个布尔值，表示是否清空动画队列
• jumpToEnd：一个布尔值，表示是否立即结束当前动画并跳转到最终状态

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

示例

假设我们有一个按钮，点击按钮会让一个div元素向右移动：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>Stop Animation Example</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: red;
      position: absolute;
    }
  </style>
</head>
<body>

<div id="box"></div>
<button id="btn">Stop Animation</button>

<script>
  $(document).ready(function() {
    $("#btn").click(function() {
      $("#box").animate({left: '+=200px'}, 2000);
    });

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

</body>
</html>

在上面的示例中，当点击按钮时，div元素会向右移动。如果在移动过程中点击div元素本身，动画会被立即停止。

这就是使用stop()方法停止动画的一个简单示例。在实际开发中，我们可以根据具体需求来灵活运用这个方法。