我们先来看它的思路：把控制不透明度和控向上移动的动画分别存储在两个队列中，控制向上移动的队列按默认情况进行(在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
});
|
本来线性执行的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()函数，也是我栽过跟头的地方。
480
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
