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);
});