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

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

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

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

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

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

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

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

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

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

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

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