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

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

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

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

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

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

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

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

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

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

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

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

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

什么是類(lèi)操作？jQuery通過(guò)類(lèi)名操作樣式

什么是jQuery? jQuer能做什么？

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