jQuery finish() 方法

jQuery 的 finish() 方法停止選定元素上當前正在執行的動畫，並清除動畫佇列，完成任何剩餘的動畫。此方法僅影響當前正在執行動畫或具有排隊動畫的元素。

語法

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

$(selector).finish(queueName)

引數

以下是上述語法的描述：

queueName（可選）：包含要停止動畫的佇列名稱的字串。

示例

在以下示例中，我們使用 jQuery finish() 方法來結束當前正在執行的動畫：

<html>
<head>
    <script src="https://ajax.googleapis.com/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

列印頁面