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的错误了吧……)：
本例完整代码：
好的，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()函数，也是我栽过跟头的地方。
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
