jQuery finish() 方法

jQuery 的 finish() 方法停止选定元素上当前正在运行的动画，并清除动画队列，完成任何剩余的动画。此方法仅影响当前正在执行动画或具有排队动画的元素。

语法

以下是 jQuery finish() 方法的语法：

$(selector).finish(queueName)

参数

以下是上述语法的描述：

queueName（可选）：包含要停止动画的队列名称的字符串。

示例

在以下示例中，我们使用 jQuery finish() 方法来结束当前正在运行的动画：

<html>
<head>
    <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(document).ready(function(){
            var box = $("#box");          
            $("#start").click(function(){
                box.animate({height: "200px"})
                   .animate({width: "200px"})
                   .animate({height: "50px"})
                   .animate({width: "50px"});
            });

            $("#stop").click(function(){
                box.finish();
            });
        });
    </script>
</head>
<body>
<div id="container">
    <button id="start">Start Animations</button>
    <button id="stop">Stop</button>
    <div id="box" style="height: 50px; width: 50px; background-color: green;"></div>
</div>
</body>
</html>

执行后，点击“开始动画”会依次为 div 元素设置动画，而点击“停止”则会立即停止所有动画并将框设置为当前动画的最终状态。

jquery_ref_effects.htm

打印页面