jQuery中的animate的自定义动画中，含有动画队列的感念。将所要执行的动画按一个个的排列成一队，并先后顺序的一个个的执行。
$('#btn4').click(function(){
$('.box').animate({ left: '100px'
}, 1000)//执行第一个动画向左移动到100px
$('.box').animate({ left: '100px', top: '100px'
}, 1000)//执行第二个动画操作移动到上面这个位置。下面以此类推不是同时执行动画，是一个个的按顺序执行
$('.box').animate({ left: '0', top: '100px'
}, 1000)
$('.box').animate({ left: '0', top: '0'
}, 1000)
})动画队列的停止和清除
.clearQueue
清除动画队列中未执行的动画
.stop( [clearQueue ] [, jumpToEnd ] )
停止当前正在运行的动画
clearQueue(default: false)
jumpToEnd(default: false)
$('#btn6').click(function(){ //去掉当前动画操作，并进行后面的动画操作
$('.box').stop(false,false)
}) $('#btn7').click(function(){ //停止当前动画，并清除未执行的动画队列(即动画暂停效果)
$('.box').stop(true, false)
}) $('#btn8').click(function(){ //停止当前动画，并清除未执行的动画队列，并且当前动画展示最终状态（即将此时那一帧的动画操作完成）
$('.box').stop(true, true)
}).finsih()
停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态
$('#btn9').click(function(){ //停止当前动画，并清除未执行的动画队列，最终展示动画队列最后一帧的最终状态
$('.box').finish()
})效果链接：http://js.jirengu.com/lafovikani/1/edit
作者：徐金俊
链接：https://www.jianshu.com/p/e6f3100aeaf9