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

📅  最后修改于: 2023-12-03 14:43:15.824000             🧑  作者: Mango

jQuery 停止动画

介绍

在开发网页时，我们经常会使用动画效果来为用户提供更好的交互体验。jQuery提供了一系列的动画方法，包括fadeIn、fadeOut、slideDown、slideUp等，这些方法都可以使用stop()方法来停止动画。

stop()方法可以用于停止当前正在运行的动画，或清除动画队列中所有未执行的动画。如果不清除动画队列，之前在队列中排在后面的动画还会继续播放。

语法
$(selector).stop(stopAll,goToEnd);
参数
  • stopAll (可选)：布尔值，用于确定是否清除动画队列中所有未执行的动画，默认值为false。
  • goToEnd (可选)：布尔值，用于确定是否立即完成当前正在执行的动画，默认值为false。
示例
<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#stopBtn").click(function(){
                $("#animateBox").stop();
            });
            $("#clearBtn").click(function(){
                $("#animateBox").stop(true,true);
            });
        });
    </script>
</head>
<body>
    <button id="stopBtn">停止动画</button>
    <button id="clearBtn">清除动画队列</button>
    <div id="animateBox" style="background-color: blue;height: 50px;width: 50px;"></div>
</body>
</html>

点击“停止动画”按钮可以停止当前正在执行的动画效果，点击“清除动画队列”按钮可以清除动画队列中的所有未执行的动画效果。