jQuery 提供針對(duì)動(dòng)畫的隊(duì)列功能尤慰。
這意味著如果編寫多個(gè) animate() 調(diào)用馏锡，jQuery 會(huì)創(chuàng)建包含這些方法調(diào)用的“內(nèi)部”隊(duì)列耻涛。然后逐一運(yùn)行這些 animate 調(diào)用优训。
案例:
動(dòng)畫隊(duì)列寫法可簡(jiǎn)化
$box.hide(1000, function(){
$box.show(1000, function(){
$box.fadeOut('slow',function(){
$box.fadeIn('slow',function(){
$box.slideUp(function(){
$box.slideDown(function(){
console.log('動(dòng)畫執(zhí)行完畢')
})
})
})
})
})
})
//等價(jià)于
$box.hide(1000)
.show(1000)
.fadeOut()
.fadeIn()
.slideUp()
.slideDown(function(){
console.log('真的完畢了')
})
jquery還提供了自定義動(dòng)畫行為的方法
animate( properties [, duration ] [, easing ] [, complete ] )
animate() 方法執(zhí)行 CSS 屬性集的自定義動(dòng)畫呢燥。該方法通過CSS樣式將元素從一個(gè)狀態(tài)改變?yōu)榱硪粋€(gè)狀態(tài)搁吓。CSS屬性值是逐漸改變的原茅，這樣就可以創(chuàng)建動(dòng)畫效果。
.clearQueue
清除動(dòng)畫隊(duì)列中未執(zhí)行的動(dòng)畫
.finish
停止當(dāng)前動(dòng)畫堕仔，并清除動(dòng)畫隊(duì)列中所有未完成的動(dòng)畫,最終展示動(dòng)畫隊(duì)列最后一幀的最終狀態(tài)
.stop( [clearQueue ] [, jumpToEnd ] )
停止當(dāng)前正在運(yùn)行的動(dòng)畫
clearQueue(default: false)
jumpToEnd(default: false)
stop方法接受兩個(gè)可選boolean型參數(shù)擂橘，第一個(gè)參數(shù)默認(rèn)為false，表示動(dòng)畫隊(duì)列不會(huì)被取消摩骨，如果設(shè)置為true通贞，表示取消接下來的動(dòng)畫隊(duì)列朗若。第二個(gè)參數(shù)默認(rèn)值是false，表示正在變化的屬性保留當(dāng)前值昌罩，設(shè)置為true表示變化到當(dāng)前動(dòng)畫的最終值哭懈。
參考:https://oscarotero.com/jquery/