假設(shè)有一組動畫設(shè)置如下：
$("#btn).on("click",function(){
$box.hide(1000, function(){
$box.show(1000, function(){
$box.fadeOut('slow',function(){
$box.fadeIn('slow',function(){
$box.slideUp(function(){
$box.slideDown(function(){
console.log('動畫執(zhí)行完畢')
})
})
})
})
})
})
});
正常執(zhí)行情況下點(diǎn)擊#btn，會自動執(zhí)行完所有動畫。
而點(diǎn)擊多次#btn則會導(dǎo)致當(dāng)前的動畫循環(huán)執(zhí)行，除非關(guān)閉瀏覽器，否則根本停不下來。
解決以上的問題關(guān)鍵在于jQuery動畫隊(duì)列。點(diǎn)擊#btn后會自動將綁定的所有動畫加載到一個動畫隊(duì)列中，再依次執(zhí)行，多次點(diǎn)擊#btn的效果就是往動畫隊(duì)列中添加新的動畫，這樣很多動畫都存在動畫隊(duì)列中，直到動畫隊(duì)列中都執(zhí)行完為止。
jQuery提供了一個簡單的方法解決動畫隊(duì)列問題：
stop([clearQueue],[jumpToEnd]);
- clearQueue:如果設(shè)置成true，則清空隊(duì)列?？梢粤⒓唇Y(jié)束動畫。
- gotoEnd:讓當(dāng)前正在執(zhí)行的動畫立即完成，并且重設(shè)show和hide的原始樣式，調(diào)用回調(diào)函數(shù)等。
同時，動畫隊(duì)列是異步的：
$('#ball').slideUp().fadeIn().css({'width':'200px'});
它的執(zhí)行順序是元素寬度馬上變成200px的同時，slideUp也在執(zhí)行，slideUp執(zhí)行完后再執(zhí)行fadeIn
