队列
- 队列的本质是一个数组，对队列的理解先从数组的push和shift开始。push是从数组尾端插入新的元素，shift是从数组首端删除元素；分别对应队列中得queue和dequeue。
- jquery所有动画基于animate方法，而animate的动画默认保存在名为fx的动画队列中。
- queue就是将动画放进队列中，dequeue就是将动画从队列中删除并执行它。
jQuery : queue() 方法
queue() 方法显示或操作在匹配元素上执行的函数队列
.queue(queueName,newQueue)
queueName 可选。字符串值，包含序列的名称。默认是 fx, 标准的效果序列。
每个元素均可拥有一到多个由 jQuery 添加的函数队列。在大多数应用程序中，只使用一个队列（名为 fx）。
动画队列
队列运行在元素上异步地调用动作序列，而不会终止程序执行。典型例子时调用元素上的多个动画方法。例如：
$('#foo').slideUp()
.fadeIn();
它的执行顺序是元素先slideUp后再fadeIn，slideUp和fadeIn有先后顺序。jquery会默认地将它们放进名为fx的队列中，我们可以这样认为：
var fx = [slideUp, fadeIn];
//相当于
$('#foo').queue('fx', fx);
//第一步：出列第一个元素slideUp并执行它
$('#foo').dequeue('fx'); //fx = ['inprogress', fadeIn]
//第二步：出列第二个元素fadeIn并执行它
$('#foo').dequeue('fx'); //fx = ['inprogress']
//第三步，队列fx为空，动画执行完毕
fx = [];
通过不断的dequeue，fx每个元素逐个依次出列执行，直至队列没有元素。
也可以这样理解
$box.hide(1000, function(){
$box.show(1000, function(){
$box.fadeOut('slow',function(){
$box.fadeIn('slow',function(){
$box.slideUp(function(){
$box.slideDown(function(){
console.log('动画执行完毕')
})
})
})
})
})
})
//等价于
$box.hide(1000)
.show(1000)
.fadeOut()
.fadeIn()
.slideUp()
.slideDown(function(){
console.log('真的完毕了')
})
注意：
- 当通过 .queue() 添加函数时，我们应当确保最终调用了 .dequeue()，这样下一个排队的函数才能执行
- 当这样写代码时：
$('#foo').slideUp().fadeIn().css({'width':'200px'});
它的执行顺序是元素宽度马上变成200px的同时，slideUp也在执行，slideUp执行完后再执行fadeIn
自定义动画
简单的动画不能满足需求的时候，jquery提供了自定义动画行为的方法
.animate( properties [, duration ] [, easing ] [, complete ] )
properties是一个CSS属性和值的对象,动画将根据这组对象移动。
$('#btn').click(function() {
$('#foo').animate({
opacity: 0.25,
left: '+=50',
}, 5000, function() {
console.log('执行完毕')
});
});
.clearQueue
清除动画队列中未执行的动画
.finish
停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态
.stop( [clearQueue ] [, jumpToEnd ] )
停止当前正在运行的动画
clearQueue(default: false)
jumpToEnd(default: false)
$('#btn6').click(function(){
//停止当前动画
$('.box').stop()
})
$('#btn7').click(function(){
//停止当前动画，并清除未执行的动画队列
$('.box').stop(true, false)
})
$('#btn8').click(function(){
//停止当前动画，并清除未执行的动画队列，并且当前动画展示最终状态
$('.box').stop(true, true)
})
$('#btn9').click(function(){
//停止当前动画，并清除未执行的动画队列，并且当前动画展示最终状态
$('.box').finish()
})
