jquery動畫隊(duì)列是一個動畫函數(shù)隊(duì)列，把多個的動畫任務(wù)放到一起，確保只有當(dāng)前面的任務(wù)完成了，才會開始下一個任務(wù)；可以對jQuery元素應(yīng)用fade、slide、animate等動畫，當(dāng)在JQuery對象上調(diào)用動畫方法時，如果對象正在執(zhí)行某個動畫效果，那么會把后面的動畫效果，放在一個隊(duì)列里面，然后按順序執(zhí)行動畫隊(duì)列里面的每一個動畫。

前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)

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

jquery動畫隊(duì)列是什么意思

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

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

JQuery動畫存在一個隊(duì)列，當(dāng)在JQuery對象上調(diào)用動畫方法時，如果對象正在執(zhí)行某個動畫效果，那么會把后面的動畫效果，放在一個隊(duì)列里面，然后按順序執(zhí)行動畫隊(duì)列里面的每一個動畫。

$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í)行完畢')            })          })        })      })    }) }) //等價于 $box.hide(1000)     .show(1000)     .fadeOut()     .fadeIn()     .slideUp()     .slideDown(function(){       console.log('真的完畢了')     })

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

stop([clearQueue], [jumpToEnd]);

stop()這個函數(shù)可以停止當(dāng)前JQuery對象里每個DOM元素正在執(zhí)行的動畫。stop有兩個參數(shù)，適用于所有JQuery效果函數(shù)，包括滑動，淡入淡出和自定義動畫。（show, hide, toggle并不能算動畫, 實(shí)質(zhì)就是css的靜態(tài)效果）

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

• clearQueue(default: false)：是否會清除動畫隊(duì)列

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

stop(false, false): 當(dāng)參數(shù)都為false時，元素會立即結(jié)束當(dāng)前的動作，不管當(dāng)前動畫有沒有完成，直接跳過這一步進(jìn)入下一個隊(duì)列，直到完成隊(duì)列里的所有動畫。

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

stop(true, true): 當(dāng)兩個參數(shù)都為true時，清除了動畫隊(duì)列，但是當(dāng)前動畫動作直接跳到了完成后的畫面，也就是說沒有了執(zhí)行的過程直接到了最后狀態(tài)。

跳到該次動作的最后狀態(tài)，然后不再執(zhí)行后面的動作

finish(): 停止當(dāng)前動畫，并清除動畫隊(duì)列中所有未完成的動畫,最終展示動畫隊(duì)列最后一幀的最終狀態(tài)。

從該位置直接跳到該動畫的最后狀態(tài)

該方法與 .stop(true,true) 方法類似，不同的是，finish() 也會引起所有排隊(duì)動畫的 CSS 屬性停止。

相關(guān)教程推薦：jQuery視頻教程