jQuery .queue()的使用詳解

1. jQuery爲咱們提供了queue()函數，來把你須要的某些代碼插入到某個隊列中

$('#test-change1').toggle(function(){
    $('#test-object1').hide('slow').queue(function(next){
        $('#test-object1').appendTo($('#test-goal1'));
        next();
    }).show('slow');

},function(){
    $('#test-object1').hide('slow').queue(function(next){
        $('#test-object1').appendTo($('#test-origin1'));
        next();            
    }).show('slow');
});

2. 自定義隊列

$("div").queue("custom", function(next) {
    $('div').css({'background':'red'});
    next();
});

但就這段代碼而已，待你真正添加進網頁，而且嘗試運行，會發現並不是「所見即所得」，壓根就不會有任何效果。

修改後：

$("div").queue("custom", function(next) {
    $('div').css({'background':'red'});
    next();
})
.dequeue("custom"); //this is the key

通常對與dequeue()的定義是「刪除隊列中最頂部的函數，而且執行它」。我並不贊同用「刪除」這個字眼，而是傾向於「取出」，其實這個函數的功能就好像是一個數據結構中隊列的指針，待隊列中前一個函數執行完後，取下一個隊列最頂端的函數。

3. queue: false

$("#object")
.delay(1000, "fader")
.queue("fader", function(next) {
    $(this).animate({opacity: 0},
        {duration: 1000, queue: false});
    next();
})
.dequeue("fader")
.animate({top: "-=40"}, {duration: 2000})

前1000毫秒，只有控制高度的「fx」隊列執行，然後1000毫秒，控制不透明度的「fader」隊列和控制高度的「fx」並行。這裏的並行就是queue:false

$('#section3a').slideUp(1000)
            .slideDown(1000)
            .animate({width: '50px'}, {duration: 1000, queue: false});

4. 獲取隊列長度

好比用隊列名取得匹配元素的長度：

var $queue=$("div").queue('fx');

很明顯，就是取得隊列名爲'fx'的隊列，若是想取得長度的話：

var $length=$('div').queue('fx').length;

注意這裏的隊列長度只是匹配元素還未運行的隊列長度，當動畫運行完以後，隊列長度會自動歸爲0

替換隊列

$('div').queue('fx',function(){
       $('div').slideDown('slow')
                 .slideUp('slow')
                 .animate({left:'+=100'},4000);
});//定義fx
$('div').queue('fx2',function(){
       $('div').slideDown('fast')
                 .slideUp('fast')
                 .animate({left:'+=100'},1000);
});//定義fx2

這裏定義了兩個隊列，一個是慢隊列,也就是默認的'fx',另外一個是快隊列'fx2'

當點擊某個按鈕時：

$('input').click(function(){
    $('div').queue('fx',fx2);
});