jquery動(dòng)畫隊(duì)列是一個(gè)動(dòng)畫函數(shù)隊(duì)列，把多個(gè)的動(dòng)畫任務(wù)放在一起，確保只有當(dāng)前面的任務(wù)完成了，才會(huì)開(kāi)始下一個(gè)任務(wù)；可以對(duì)jQuery元素應(yīng)用fade、slide、 animate等動(dòng)畫，當(dāng)在JQuery物件上呼叫動(dòng)畫方法時(shí)，如果物件正在執(zhí)行某個(gè)動(dòng)畫效果，那麼會(huì)把後面的動(dòng)畫效果，放在一個(gè)佇列裡面，然後按順序執(zhí)行動(dòng)畫佇列裡面的每一個(gè)動(dòng)畫。

本文操作環(huán)境：windows10系統(tǒng)、jquery3.6.1版、Dell G3電腦。

jquery動(dòng)畫隊(duì)列是什麼意思

隊(duì)列的作用就是讓我們把一個(gè)又一個(gè)的任務(wù)放到一起，確保只有當(dāng)前面的任務(wù)完成了，才會(huì)開(kāi)始下一個(gè)任務(wù)。這裡面的任務(wù)可以是同步的，也可以是異步的。

jQuery的動(dòng)畫系統(tǒng)就是執(zhí)行一個(gè)函數(shù)佇列。對(duì)jQuery元素套用fade,slide,animate等動(dòng)畫，都會(huì)預(yù)設(shè)將函數(shù)壓入一個(gè)fx的佇列。在我們使用jQuery的animate()的時(shí)候，我們可以在option參數(shù)中傳入一個(gè)queue的標(biāo)誌位來(lái)決定這個(gè)動(dòng)畫時(shí)候壓入當(dāng)前元素的動(dòng)畫隊(duì)列。如果為false,則不等待目前佇列完成，而是立即執(zhí)行該動(dòng)畫。

JQuery動(dòng)畫存在一個(gè)佇列，當(dāng)在JQuery物件上呼叫動(dòng)畫方法時(shí)，如果物件正在執(zhí)行某個(gè)動(dòng)畫效果，那麼會(huì)把後面的動(dòng)畫效果，放在一個(gè)佇列裡面，然後按順序執(zhí)行動(dòng)畫隊(duì)列裡面的每一個(gè)動(dòng)畫。

$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('真的完畢了')
    })

但是有時(shí)動(dòng)畫正在播放的時(shí)候，用戶想要它停止運(yùn)動(dòng)，或者用戶在此時(shí)已經(jīng)跳躍了網(wǎng)頁(yè)，動(dòng)畫已經(jīng)不需要再動(dòng)了，此時(shí)需要對(duì)動(dòng)畫隊(duì)列進(jìn)行一些操作來(lái)滿足需求。

stop([clearQueue], [jumpToEnd]);

stop()這個(gè)函數(shù)可以停止目前JQuery物件裡每個(gè)DOM元素正在執(zhí)行的動(dòng)畫。 stop有兩個(gè)參數(shù)，適用於所有JQuery效果函數(shù)，包括滑動(dòng)，淡入淡出和自訂動(dòng)畫。 （show, hide, toggle並不能算動(dòng)畫, 實(shí)質(zhì)就是css的靜態(tài)效果）

這兩個(gè)參數(shù)的意義分別代表：

• clearQueue(default: false )：是否會(huì)清除動(dòng)畫佇列

• jumpToEnd(default: false)：是否立即完成目前動(dòng)畫

#stop(false, false): 當(dāng)參數(shù)都為false時(shí)，元素會(huì)立即結(jié)束目前的動(dòng)作，不管目前動(dòng)畫有沒(méi)有完成，直接跳過(guò)這一步進(jìn)入下一個(gè)佇列，直到完成佇列裡的所有動(dòng)畫。

stop(true, false): 當(dāng)參數(shù)為true和false時(shí)，說(shuō)明清除了動(dòng)畫佇列，並且不再繼續(xù)執(zhí)行目前未完成的動(dòng)畫。

stop(true, true): 當(dāng)兩個(gè)參數(shù)都為true時(shí)，清除了動(dòng)畫佇列，但是當(dāng)前動(dòng)畫動(dòng)作直接跳到了完成後的畫面，也就是說(shuō)沒(méi)有了執(zhí)行的過(guò)程直接到了最後狀態(tài)。 ###############跳到該次動(dòng)作的最後狀態(tài)，然後不再執(zhí)行後面的動(dòng)作######finish(): 停止目前動(dòng)畫，並清除動(dòng)畫佇列中所有未完成的動(dòng)畫,最終展示動(dòng)畫隊(duì)列最後一幀的最終狀態(tài)。 ###############從該位置直接跳到該動(dòng)畫的最後狀態(tài)######該方法與.stop(true,true) 方法類似，不同的是，finish () 也會(huì)造成所有排隊(duì)動(dòng)畫的CSS 屬性停止。 ######相關(guān)教學(xué)推薦：###jQuery影片教學(xué)#######

以上是jquery動(dòng)畫隊(duì)列是什麼意思的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！