jQuery 快速结束当前正在执行的动画

2023年6月11日上午1:58 • JavaScript

jQuery 提供了 stop() 方法用于快速结束当前正在执行的动画，其语法为：

$(selector).stop(stopAll, goToEnd);

其中 stopAll 参数用于控制是否停止正在队列中等待执行的动画，默认为 false，即仅结束当前正在执行的动画。goToEnd 参数用于控制是否立即完成动画至结尾状态，默认为 false，即立即结束。

以下是两条示例说明：

示例一：停止当前动画

<!DOCTYPE html>
<html>
<head>
    <title>示例一：停止当前动画</title>
    <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function() {
            // 点击按钮开始动画
            $('#btn-start').click(function() {
                $('#box').animate({ 
                    left: '500px' 
                }, 5000);
            });

            // 点击按钮停止当前动画
            $('#btn-stop').click(function() {
                $('#box').stop();
            });
        });
    </script>
</head>
<body>
    <button id="btn-start">开始</button>
    <button id="btn-stop">停止</button>
    <div id="box" style="width: 100px; height: 100px; background-color: red; position: absolute; top: 100px; left: 0;"></div>
</body>
</html>

在该示例中，我们在页面上放置了一个红色的正方形，并使用 animate() 方法使其从左侧移动到页面右侧。当点击“开始”按钮时，动画开始执行。当点击“停止”按钮时，使用 stop() 方法停止当前正在执行的动画。

示例二：立即完成动画至结尾状态

<!DOCTYPE html>
<html>
<head>
    <title>示例二：立即完成动画至结尾状态</title>
    <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script>
    <script>
        $(function() {
            // 点击按钮开始动画
            $('#btn-start').click(function() {
                $('#box').animate({ 
                    left: '500px' 
                }, 5000);
            });

            // 点击按钮立即完成动画
            $('#btn-complete').click(function() {
                $('#box').stop(true, true);
            });
        });
    </script>
</head>
<body>
    <button id="btn-start">开始</button>
    <button id="btn-complete">立即完成</button>
    <div id="box" style="width: 100px; height: 100px; background-color: red; position: absolute; top: 100px; left: 0;"></div>
</body>
</html>

在该示例中，我们与示例一相同地使用了 animate() 方法使红色正方形从左侧移动到页面右侧。当点击“开始”按钮时，动画开始执行。当点击“立即完成”按钮时，使用 stop(true, true) 方法立即将动画执行至结尾状态。第一个 true 参数用于表示停止队列中等待执行的动画，第二个 true 参数用于表示立即完成当前动画至结尾状态。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery 快速结束当前正在执行的动画 - Python技术站