更新時間:2021-07-19 來源:黑馬程序員 瀏覽量:
使用動畫的過程中,如果在同一個元素上調(diào)用一個以上的動畫方法,那么對這個元素來說,除了當(dāng)前正在調(diào)用的動畫,其他的動畫將被放到效果隊列中,這樣就形成了動畫隊列。
動畫隊列中所有動畫都是按照順序執(zhí)行的,默認只有當(dāng)前一個動畫執(zhí)行完畢,才會執(zhí)行后面的動畫。為此,jQuery提供了stop()方法用于停止動畫效果,通過此方法,可以讓動畫隊列后面的動畫提前執(zhí)行。
stop()方法適用于所有的jQuery效果,包括元素的淡入淡出,以及自定義動畫等。stop()方法語法如下所示。
$(selector).stop(stopAll, goToEnd);
上述語法中,stop()方法的兩個參數(shù)都是可選的。其中,stopAll參數(shù)用于規(guī)定是否清除動畫隊列,默認是false;goToEnd參數(shù)用于規(guī)定是否立即完成當(dāng)前的動畫,默認是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,那么就會刪除動畫隊列中剩余的動畫,并且永遠也不會執(zhí)行。如果將第2個參數(shù)設(shè)置為true,那么就會停止當(dāng)前的動畫,但參與動畫的每一個CSS屬性將被立即設(shè)置為它們的目標(biāo)值。
前面在實現(xiàn)下拉菜單滑動效果時,如果用戶頻繁的操作,就會產(chǎn)生動畫隊列現(xiàn)象,影響用戶體驗,為了解決這個問題,下面通過stop()方法將代碼進行改寫。
$(".nav > li").hover(function () { $(this).children("ul").stop().slideToggle(200); });
上述代碼中,在調(diào)用slideToggle之前調(diào)用stop()方法來阻止動畫隊列。