**这里写代码片JQuery中的动画序列queue()，dequeue()，和stop()如下例：
div.show("slow").animate({left:'+=300'},2000).slideToggle(1000).animate({left:'-=300'},1500).hide("slow").slideUp("normal", runIt);
此时div的动画先从左向右移动，在右侧隐藏后先发生转移到左边再显示出来，而我们所希望的是移动到右侧后消失、显示再移动到左侧
那明明我们是按顺序写的，为什么会出现这个问题呢？
其实，当你使用一系列的动画效果(如hide，show)，这些动画函数都会被放进一个名为"fx"的队列中，然后在以先进先出的方式执行队列中的函数，而非动画函数，比如上面例子中的slideToggle()函数，则是不会进入这个队列中，并且先于动画函数的执行，也就是在"fx"先进先出，取出第一个函数之前，它就已经执行了。
那如果写一个白色方块，先收起(slideUp)，在放下(SlideDown)，背景再变成白色，应该不会写成$('div').slideUp('slow').slideDown('slow').css({"background":"red"});
而是应该使用queue函数$('div').slideUp('slow').slideDown('slow').queue(function(next){
$('#object').css({"background":"red"});
next();
});
首先，我们又要回到.queue()的函数定义,其实我们现在这种在queue中加入函数的用法，官方给出的函数原型是：queue(
[ queueName ], callback( next ) )
也就是说我们加入的函数其实是一个关于队列的回调函数。也就是在队列结束之后，系统会自动为你调用你加入的函数。（补充一下，关于回调函数：自己定义，系统调用。回调函数的关键在于我们无法预知它何时被调用。因为我们只是定义了这么一个函数，可能通知系统在完成某一系列的动作后来调用它。）
其实我们可以这样考虑，如果把这个函数作为slideDown的回调函数效果不都是一样的吗？因为我们最终想要的只是保证变色函数在slideDown之后执行，slideDown和queue的回调函数都能保证这种效果！
$('div').slideUp('slow').slideDown('slow',function(){
$('#object').css({"background":"red"});
});
这二者有异曲同工之妙
还有一点要注意的是.queue()中的next参数和next()能不能舍去其一？
我们上面说到queue中的函数是回调函数，如果我们稍稍对上上面的代码做一些修改，比如：
$('div').slideUp('slow').slideDown('slow').queue(function(next){
$('#object').css({"background":"red"});
//next();
}).hide('slow');一是我把next()语句注释掉了，二是希望在变色以后再让方块隐藏起来。但是当你运行之后，发现在变色之后无法对方块执行隐藏。要记住queue中的函数是回调函数呀，默认情况下只有动画队列执行完了，才会调用变色函数，既然动画队列都执行完了，哪里来的hide()?所以next()是保证在执行完这次队列后再次执行下一个动画函数
我曾经尝试过抛弃next参数而保留next()语句，这样的结果是能在现代浏览器(firefox,chrome之类)中运行，但无法在ie6中运行。所以，保留吧 。next和next()是jquery1.4中才开始出现的，而在之前使用的是.dequeue()函数，如果要将这节的例子改为使用dequeue()，如下：
$('#object').slideUp('slow').slideDown('slow').queue(function(){
$('#object').css({"background":"red"});
$(this).dequeue();
});
自定义队列
建立一个名为'custom'的队列，里面有一个能使黑色小方块改变背景颜色的方法,如下：
$("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("custom")。一般对与dequeue()的定义是“删除队列中最顶部的函数，并且执行它”。我并不赞同用“删除”这个字眼，而是倾向于“取出”，其实这个函数的功能就好像是一个数据结构中队列的指针，待队列中前一个函数执行完后，取下一个队列最顶端的函数。（不是很明白）
现在需求如下 ：在2000毫秒的时间内，物体的高度一致在均匀变化，逐渐减小，而不透明度在前1000毫秒始终保持为1.0，而在后1000毫秒才逐渐减小直至完全为0。
如果我们暂且只考虑向上浮动和透明效果，我们可能会写出这样的语句：
$("#object").animate({opacity: 0, top: "-=40"}, {duration: 2000});
很遗憾，这样的语句只能让物体在整体2000毫秒中都处于逐渐向不透明转化的过程，也就是不能让它在前1000毫秒中保持100%不透明——于是我们用queue来解决这个问题：
$("#object")
.delay(1000, "fader")
.queue("fader", function(next) {
$(this).animate({opacity: 0}, {duration:
1000, queue: false});
next();
})
.dequeue("fader")
.animate({top: "-=40"}, {duration: 2000})
我们先来看它的思路：把控制不透明度和控向上移动的动画分别存储在两个队列中，控制向上移动的队列按默认情况进行(在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的错误了吧……)
获取队列长度比如用队列名取得匹配元素的长度：
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);
});
（队列长度是4）
本文参考：http://www.cnblogs.com/zhwl/p/4328279.html**
jQuery动画序列
墨衍会员
·
AI 创作全网分发
墨衍智能分发
本文由作者通过墨衍一键同步至各平台
1分发平台
1.6k累计阅读
1.6k平均单平台
已同步平台
优快云
微信公众号
微博
知乎
掘金
百家号
博客园
抖音
小红书
你的文章也可以这样分发
墨衍会员 ¥399起/年，写一次发全网
我也要
1051
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
