📌  相关文章
📜  jQuery |停止动画(1)

📅  最后修改于: 2023-12-03 15:32:12.617000             🧑  作者: Mango

jQuery | 停止动画

在使用 jQuery 的过程中，动画效果常常成为页面渲染的重要元素之一。但是有时候我们需要在动画运行时停止它，这个时候就需要用到 stop() 方法。

stop() 方法

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

clearQueue 参数

clearQueue 参数用于清除动画队列中尚未执行的动画。它默认为 false，表示不清除队列。如果将其设置为 true，则会清除队列中尚未执行的动画。

$(selector).stop(true);
jumpToEnd 参数

jumpToEnd 参数用于跳到动画结束状态。它默认为 false，表示不跳到结束状态。如果将其设置为 true，则会跳到动画结束状态。

$(selector).stop(false, true);
示例

下面是一个简单的示例代码，演示如何使用 stop() 方法停止动画。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>jQuery | 停止动画</title>
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <style>
    div {
      width: 50px;
      height: 50px;
      position: relative;
      background-color: #008cba;
    }
  </style>
</head>

<body>
  <div id="box"></div>
  <br>
  <button id="start">开始</button>
  <button id="stop">停止</button>
  <script>
    $("#start").click(function () {
      $("#box").animate({
        left: "500px"
      }, 4000);
    });
    $("#stop").click(function () {
      $("#box").stop();
    });
  </script>
</body>

</html>

在这个示例中，点击「开始」按钮会给一个 <div> 元素添加一个水平方向的移动动画，时长为 4 秒；点击「停止」按钮会停止当前正在运行的动画，即移动动画。

结束语

本文介绍了 jQuery 的 stop() 方法，可以帮助你在必要的时候停止动画，避免出现意外的结果。当然，在实际开发中，还有很多其他参数及技巧，需要结合具体情况来使用。