当在jQuery对象上调用动画方法时，如果对象正在执行某个动画效果，那么新调用的动画方法就会被添加到动画队列中，jQuery会按顺序依次执行动画队列的每个动画。也就是说，如果同时给一个元素绑定了多个动画，执行动画时不是“同时”执行所有动画，而是将动画放到一个默认的名称为'fx'的队列中。
jQuery提供了以下几种方法来操作动画队列。
-
stop([clearQuery],[gotoEnd]):停止当前jQuery对象里每个DOM元素上正在执行的动画。 -
queue([queueName,]callback):将callback动画数添加到当前jQuery对象里所有DOM元素的动画函数队列的尾部。 -
queue([queueName,]naeQueue):用newQueue动画函数队列代替当前jQuery对象里所的DOM元素的动画函数队列。 -
dequeue():执行动画函数队列头的第一个动画函数，并将该动画函数移出队列。 -
clearQueue([queueName]):清空动画函数队列中的所有动画函数。
例如，如下代码会执行一组动画，正方形会依顺序行走一周
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
</head>
<body>
<div class="box"></div>
<button id="start">start</button>
<button id="stop">stop</button>
<button id="clear">clear</button>
<p class="queue-info">当前动画队列剩余<span id="num">0</span>个动画</p>
</body>
</html>
.box {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
}
#start {
position: absolute;
top: 200px;
}
#stop {
position: absolute;
top: 200px;
left: 60px;
}
#clear {
position: absolute;
top: 200px;
left: 110px;
}
.queue-info {
position: absolute;
top: 210px;
}
function anime(){
var num = setInterval(showQueueLength, 50);
$('.box').animate({
width: '200'
})
.animate({
left: '100',
width: '100'
})
.animate({
height: '200'
})
.animate({
height: '100',
top: '100'
})
.animate({
width: '200',
left: '0'
})
.animate({
width: '100',
})
.animate({
height: '200',
top: '0'
})
.animate({
height: '100',
});
}
$('#start').on('click', anime);
function showQueueLength(){
var length = $('.box').queue('fx').length;
$('#num').text(length);
}
执行代码结果
animate1.gif
这是比较简单的情况，所有的动画都是用animate()函数来实现，那么如果我们想让正方形在移动的过程中，将颜色变为蓝色，该如何实现？
需求很简单，即正方形移动->变色->继续移动
那么代码就可以这样写
$('.box').animate({
width: '200'
})
.animate({
left: '100',
width: '100'
})
.animate({
height: '200'
})
.css('background-color', 'blue')
.animate({
height: '100',
top: '100'
})
......
在动画的过程中插入了css函数改变正方形的颜色，那么实际结果如何？
执行代码结果
animate2.gif
可以看到，在动画开始的一瞬间，正方形就变成了蓝色，而不是在动画执行的过程中，这是由于css()函数并不是动画，不是和其他animate()一样在队列中执行，代码会先执行css函数，然后再去执行队列中的动画，这一点和setTimeout的任务队列有一些类似。
那么要实现上述需求，就需要使用到队列函数
使用如下代码可以实现
$('.box').animate({
width: '200'
})
.animate({
left: '100',
width: '100'
})
.animate({
height: '200'
})
.queue('fx', function(){ // fx为默认参数，可以省略
$('.box').css('background-color', 'blue'); // 将改变背景色的动画加入队列
$('.box').dequeue(); // 执行并移出队列
})
.animate({
height: '100',
top: '100'
})
......
代码执行结果
animate3.gif
网友评论