什么是動畫隊列？怎樣停止動畫隊列效果？

使用動畫的過程中，如果在同一個元素上調(diào)用一個以上的動畫方法，那么對這個元素來說，除了當前正在調(diào)用的動畫，其他的動畫將被放到效果隊列中，這樣就形成了動畫隊列。

動畫隊列中所有動畫都是按照順序執(zhí)行的，默認只有當前一個動畫執(zhí)行完畢，才會執(zhí)行后面的動畫。為此，jQuery提供了stop()方法用于停止動畫效果，通過此方法，可以讓動畫隊列后面的動畫提前執(zhí)行。

stop()方法適用于所有的jQuery效果，包括元素的淡入淡出，以及自定義動畫等。stop()方法語法如下所示。

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

上述語法中，stop()方法的兩個參數(shù)都是可選的。其中，stopAll參數(shù)用于規(guī)定是否清除動畫隊列，默認是false；goToEnd參數(shù)用于規(guī)定是否立即完成當前的動畫，默認是false。

由于stop()方法的參數(shù)的不同設置，會有不同的作用，下面以div元素為例，演示4種常見的使用方式。示例代碼如下。

$("div").stop();        // 停止當前動畫，繼續(xù)下一個動畫
$("div").stop(true);      // 清除div元素動畫隊列中的所有動畫
$("div").stop(true, true);   // 停止當前動畫，清除動畫隊列中的所有動畫
$("div").stop(false, true);   // 停止當前動畫，繼續(xù)執(zhí)行下一個動畫

上述代碼中，stop()方法在不傳遞參數(shù)時，表示立即停止當前正在執(zhí)行的動畫，開始執(zhí)行動畫隊列中的下一個動畫 。如果將第1個參數(shù)設置為true，那么就會刪除動畫隊列中剩余的動畫，并且永遠也不會執(zhí)行。如果將第2個參數(shù)設置為true，那么就會停止當前的動畫，但參與動畫的每一個CSS屬性將被立即設置為它們的目標值。

前面在實現(xiàn)下拉菜單滑動效果時，如果用戶頻繁的操作，就會產(chǎn)生動畫隊列現(xiàn)象，影響用戶體驗，為了解決這個問題，下面通過stop()方法將代碼進行改寫。

$(".nav > li").hover(function () {
 $(this).children("ul").stop().slideToggle(200);
});

上述代碼中，在調(diào)用slideToggle之前調(diào)用stop()方法來阻止動畫隊列。

jQuery自定義插件開發(fā)實踐

什么是類操作？jQuery通過類名操作樣式

什么是jQuery? jQuer能做什么？

傳智教育HTML前端與移動開發(fā)開發(fā)高手班