jQuery 提供针对动画的队列功能。
这意味着如果编写多个 animate() 调用，jQuery 会创建包含这些方法调用的“内部”队列。然后逐一运行这些 animate 调用。
案例:
动画队列写法可简化
$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('真的完毕了')
})
jquery还提供了自定义动画行为的方法
animate( properties [, duration ] [, easing ] [, complete ] )
animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的，这样就可以创建动画效果。
.clearQueue
清除动画队列中未执行的动画
.finish
停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态
.stop( [clearQueue ] [, jumpToEnd ] )
停止当前正在运行的动画
clearQueue(default: false)
jumpToEnd(default: false)
stop方法接受两个可选boolean型参数，第一个参数默认为false，表示动画队列不会被取消，如果设置为true，表示取消接下来的动画队列。第二个参数默认值是false，表示正在变化的属性保留当前值，设置为true表示变化到当前动画的最终值。
参考:https://oscarotero.com/jquery/