jquery 停止動畫

jQuery是一款廣泛應用在Web開發中的JavaScript庫，其靈活的動畫功能可有效提升網站的使用者體驗。在實際開發中，不少開發者遇到過需要停止正在執行的動畫的情況。本文將介紹如何停止jQuery的動畫效果。

一、使用stop()方法

jQuery提供了一個stop()方法，可以用來停止正在進行的動畫效果。此方法的語法如下：

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

其中，selector是要進行動畫效果的元素；stopAll是一個可選參數，用於指定是否停止正在進行的所有動畫效果（預設值為false，即只停止目前動畫）；gotoEnd是另一個可選參數，用於指定在什麼位置停止動畫效果（預設值為false，意味著停止在目前位置）。

下面是一個簡單的例子，示範如何停止正在運行的動畫：

$(document).ready(function(){
    $("button").click(function(){
        $("#box").animate({left: '250px'}, 5000);
    });
    $("#stop").click(function(){
        $("#box").stop();
    });
});

在這個例子中，當使用者點擊按鈕時，會對id為「box」的元素進行一個持續5秒鐘的向左移動的動畫效果。當使用者點擊id為「stop」的元素時，就會停止這個動畫。

二、使用clearQueue()方法

除了stop()方法之外，jQuery還提供了一個clearQueue()方法，用於清除元素上的佇列。通常情況下，當動畫效果被停止時，佇列上的所有動畫都會被清除。但是，如果你不想停止目前動畫，卻想清除其他動畫效果，那麼clearQueue()方法就會非常有用了。

此方法的語法如下：

$(selector).clearQueue(queueName);

其中，queueName是可選參數，用於指定要清除的佇列名稱。如果不指定該參數，就會清除預設佇列上的所有動畫效果。

下面是一個例子，示範如何在停止動畫時清除除當前動畫之外的其他動畫效果：

$(document).ready(function(){
    $("button").click(function(){
        $("#box").animate({left: '250px'}, 5000);
        $("#box").animate({top: '100px'}, 5000);
    });
    $("#stop").click(function(){
        $("#box").stop(false, true).clearQueue();
    });
});

在這個例子中，當使用者點擊按鈕時，會對id為「box」的元素進行一個先向左移動，再向下移動的動畫效果。當使用者點擊id為「stop」的元素時，會停止向下移動的動畫，但保留向左移動的動畫效果。同時，其他的動畫效果也被清除掉了。

總結：

如果你想要停止正在運行的動畫效果，可以使用stop()方法；如果你想要在停止動畫時清除佇列中的其他動畫效果，可以使用clearQueue()方法。在實際開發中，根據需要選擇不同的方法來實現你的目的。

以上是jquery 停止動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！