什么是動(dòng)畫隊(duì)列？怎樣停止動(dòng)畫隊(duì)列效果？

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

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

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

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

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

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

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

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

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

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

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

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

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

什么是jQuery? jQuer能做什么？

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