jquery動畫隊列怎么實現

這篇文章主要介紹“jquery動畫隊列怎么實現”，在日常操作中，相信很多人在jquery動畫隊列怎么實現問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”jquery動畫隊列怎么實現”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

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

本文操作環境：windows10系統、jquery3.6.1版、Dell G3電腦。

jquery動畫隊列是什么意思

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

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

JQuery動畫存在一個隊列，當在JQuery對象上調用動畫方法時，如果對象正在執行某個動畫效果，那么會把后面的動畫效果，放在一個隊列里面，然后按順序執行動畫隊列里面的每一個動畫。

$box.hide(1000, function(){
   $box.show(1000, function(){
     $box.fadeOut('slow',function(){
       $box.fadeIn('slow',function(){
         $box.slideUp(function(){
           $box.slideDown(function(){
             console.log('動畫執行完畢')
           })
         })
       })
     })
   })
})
//等價于
$box.hide(1000)
    .show(1000)
    .fadeOut()
    .fadeIn()
    .slideUp()
    .slideDown(function(){
      console.log('真的完畢了')
    })

但是有時動畫正在播放的時候，用戶想要它停止運動，或者用戶在此時已經跳轉了網頁，動畫已經不需要再動了，此時需要對動畫隊列進行一些操作來滿足需求。

stop([clearQueue], [jumpToEnd]);

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

這兩個參數的含義分別代表：

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

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

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

stop(true, false): 當參數為true和false時，說明清除了動畫隊列，并且不再繼續執行當前未完成的動畫。

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

跳到該次動作的最后狀態，然后不再執行后面的動作

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

從該位置直接跳到該動畫的最后狀態

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

到此，關于“jquery動畫隊列怎么實現”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！