jquery動畫隊(duì)列怎么實(shí)現(xiàn)

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

創(chuàng)新互聯(lián)專注于新會企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),購物商城網(wǎng)站建設(shè)。新會網(wǎng)站建設(shè)公司,為新會等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站建設(shè)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

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

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

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

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

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

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

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

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

stop([clearQueue], [jumpToEnd]);

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

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

clearQueue(default: false)：是否會清除動畫隊(duì)列
jumpToEnd(default: false)：是否立即完成當(dāng)前動畫