http://qurtyy.blog.163.com/blog/static/5744368120130221419244/

我们先来看它的思路：把控制不透明度和控向上移动的动画分别存储在两个队列中，控制向上移动的队列按默认情况进行(在2000毫秒内完成)，而不透明度的控制在1000毫秒内执行，但这个队列要晚于默认队列1000毫秒执行

再简单一点，就是：前1000毫秒，只有控制高度的“fx”队列执行，而后1000毫秒，控制不透明度的“fader”队列和控制高度的“fx”并行

首先准备两个队列，

一个是默认的"fx"，存储高度变化动画：

?

.animate({top: "-=40"}, {duration: 2000})

用来另一个是自定义的"fader"的队列，来存储不透明度变化的动画：

?

.animate({opacity: 0}, {duration: 1000, queue: false});

注意上面这段代码中的"queue:false"，这是很关键的一句话，目的是让这个animate不进入默认的"fx"队列中

任何的动画效果都会进入"fx"队列中，即使你定义在.queue()中的动画也是一样，并且动画效果，务必会按顺序执行，比如说下面这段代码：

?

$('#object').slideUp(1000)<br>               .slideDown(1000)<br>               .animate({width: '50px'}, {duration: 1000});

运行后它只会按照顺序来执行，先收起，再放下，再把宽度收缩为50px

但是一旦我加入了"queue:false"这个参数：

?

$('#section3a').slideUp(1000)

            .slideDown(1000)

            .animate({width: '50px'}, {duration: 1000, queue: false});

你会发现在收缩放下的同时，object的宽度也在收缩

本来线性执行的slideUp，slideDown，animate，变成了animate和slideUp，slideDown并行：

运行结果如下

 

 

本例完整代码：

OK，我们回过头来再看实战中的这个例子：

?

$("#object")

.delay(1000, "fader")

.queue("fader", function(next) {

    $(this).animate({opacity: 0},

        {duration: 1000, queue: false});

    next();

})

.dequeue("fader")

.animate({top: "-=40"}, {duration: 2000})

其实前三个语句(这里所说的语句以"."为区分标志)，做了这么几件事：

定义一个名为fader的队列，专用于控制不透明度的改变——.queue()语句

让它1000毫秒后执行——.delay()延时函数，延时fader队列的执行时间；.dequeue执行fader队列。

而最后的.animate则是默认进行的，不用管它。一起来看看效果，左边的是正确的，右边的是错误的(可能在IE6中有布局错位的情况，因为是jQuery例子，时间有限，也就不追究css的错误了吧……)：

true

false

 

本例完整代码：

好的，queue的主要功能就介绍到这里，下面还有点时间，介绍一些非主流功能：

获取队列长度

比如用队列名取得匹配元素的长度：

?

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

很明显，就是取得队列名为'fx'的队列，如果想取得长度的话：

?

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

注意这里的队列长度只是匹配元素还未运行的队列长度，当动画运行完之后，队列长度会自动归为0，举下面一个例子：

?

function animateT(){

    $("#section2-div").slideToggle('3000')

    .slideToggle('3000')

    .hide('3000')

    .show('3000')

    .animate({left:'+=200'},2000)

    .hide('3000')

    .show('3000')

    .animate({left:'-=200'},2000,animateT);//在这轮动画结束的时候再调用自己，使动画无限循环下去         

            }

然后当点击按钮的时候显示队列的长度：

?

$("#section2-input").click(function(){

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

    $('#section2-h1').text($queue.length);

});

效果：

0

 

 

点击按钮就可以看见实时队列的长度

本例源码：

替换队列

queue还有一种用法是替换队列，就是自定义一个队列后，用自定义的队列替换元素原匹配的队列：

比如你给某个元素定义了两个队列：

?

$('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);

});

很简单吧，明显用fx2替换了fx,当然这也不是立即替换，如果fx还没有执行完的话。除非你用stop()函数（我们下节课介绍）。

总结

OK，今天对queue 的讲解就到这里，肯定有很多疏漏的地方，希望大家多多指证，上面的这些用法是我总结出来，应该算是比较主流的用法吧。如果还有一些我没有提到，或是有什么问题想交流，都可以留言给我。

参考的资料有jQuery官方文档说明 ，Cameron McKay的博客，《犀利开发jQuery》

下节课我打算向大家介绍stop()函数，也是我栽过跟头的地方。