隊(duì)列

• 隊(duì)列的本質(zhì)是一個數(shù)組抠刺，對隊(duì)列的理解先從數(shù)組的push和shift開始塔淤。push是從數(shù)組尾端插入新的元素，shift是從數(shù)組首端刪除元素速妖；分別對應(yīng)隊(duì)列中得queue和dequeue高蜂。
• jquery所有動畫基于animate方法，而animate的動畫默認(rèn)保存在名為fx的動畫隊(duì)列中罕容。
• queue就是將動畫放進(jìn)隊(duì)列中备恤，dequeue就是將動畫從隊(duì)列中刪除并執(zhí)行它。

jQuery : queue() 方法

queue() 方法顯示或操作在匹配元素上執(zhí)行的函數(shù)隊(duì)列

.queue(queueName,newQueue)

queueName 可選锦秒。字符串值露泊，包含序列的名稱。默認(rèn)是 fx, 標(biāo)準(zhǔn)的效果序列旅择。
每個元素均可擁有一到多個由 jQuery 添加的函數(shù)隊(duì)列惭笑。在大多數(shù)應(yīng)用程序中，只使用一個隊(duì)列（名為 fx）生真。

動畫隊(duì)列

隊(duì)列運(yùn)行在元素上異步地調(diào)用動作序列沉噩，而不會終止程序執(zhí)行。典型例子時(shí)調(diào)用元素上的多個動畫方法柱蟀。例如：

$('#foo').slideUp()
         .fadeIn();

它的執(zhí)行順序是元素先slideUp后再fadeIn川蒙，slideUp和fadeIn有先后順序。jquery會默認(rèn)地將它們放進(jìn)名為fx的隊(duì)列中长已，我們可以這樣認(rèn)為：

var fx = [slideUp, fadeIn];

//相當(dāng)于
$('#foo').queue('fx', fx);

//第一步：出列第一個元素slideUp并執(zhí)行它
$('#foo').dequeue('fx');    //fx = ['inprogress', fadeIn]

//第二步：出列第二個元素fadeIn并執(zhí)行它
$('#foo').dequeue('fx');    //fx = ['inprogress']

//第三步畜眨，隊(duì)列fx為空，動畫執(zhí)行完畢
fx = [];

通過不斷的dequeue术瓮，fx每個元素逐個依次出列執(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í)行完畢')
           })
         })
       })
     })
   })
})
//等價(jià)于
$box.hide(1000)
    .show(1000)
    .fadeOut()
    .fadeIn()
    .slideUp()
    .slideDown(function(){
      console.log('真的完畢了')
    })

注意：

• 當(dāng)通過 .queue() 添加函數(shù)時(shí)斤斧，我們應(yīng)當(dāng)確保最終調(diào)用了 .dequeue()早抠，這樣下一個排隊(duì)的函數(shù)才能執(zhí)行
• 當(dāng)這樣寫代碼時(shí)：

  $('#foo').slideUp().fadeIn().css({'width':'200px'});

它的執(zhí)行順序是元素寬度馬上變成200px的同時(shí)，slideUp也在執(zhí)行撬讽，slideUp執(zhí)行完后再執(zhí)行fadeIn

自定義動畫

簡單的動畫不能滿足需求的時(shí)候蕊连，jquery提供了自定義動畫行為的方法

.animate( properties [, duration ] [, easing ] [, complete ] )

properties是一個CSS屬性和值的對象,動畫將根據(jù)這組對象移動悬垃。

$('#btn').click(function() {
  $('#foo').animate({
    opacity: 0.25,
    left: '+=50',
  }, 5000, function() {
    console.log('執(zhí)行完畢')
  });
});

.clearQueue

清除動畫隊(duì)列中未執(zhí)行的動畫

.finish

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

.stop( [clearQueue ] [, jumpToEnd ] )

停止當(dāng)前正在運(yùn)行的動畫
clearQueue(default: false)
jumpToEnd(default: false)

    $('#btn6').click(function(){
      //停止當(dāng)前動畫
      $('.box').stop()
    })
    $('#btn7').click(function(){
      //停止當(dāng)前動畫甘苍，并清除未執(zhí)行的動畫隊(duì)列
      $('.box').stop(true, false)
    })
    $('#btn8').click(function(){
      //停止當(dāng)前動畫尝蠕，并清除未執(zhí)行的動畫隊(duì)列，并且當(dāng)前動畫展示最終狀態(tài)
      $('.box').stop(true, true)
    })
    $('#btn9').click(function(){
      //停止當(dāng)前動畫载庭，并清除未執(zhí)行的動畫隊(duì)列看彼，并且當(dāng)前動畫展示最終狀態(tài)
      $('.box').finish()
    })

作者：彭榮輝
鏈接：http://www.reibang.com/u/0f804364a8a8
來源：簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)靖榕，非商業(yè)轉(zhuǎn)載請注明出處。