一、写法方式
(1) 方式一：将动画连续的写就会形成一个动画队列，按顺序从上至下依次执行
$('#btn4').click(function(){
$('.box').animate({
left: '100px'
}, 1000) // 执行第一帧动画
$('.box').animate({
left: '100px',
top: '100px'
}, 1000) // 执行第二帧动画
$('.box').animate({
left: '0',
top: '100px'
}, 1000) // 执行第三帧动画
$('.box').animate({
left: '0',
top: '0'
}, 1000) // 执行第四帧动画
})
(2) 方式二：将后续动画写入第一个动画的回调函数里
$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('真的完毕了')
})
特别注意：队列运行在元素上异步地调用动作序列的。例如下面代码，执行顺序是 马上显示字符showla，再执行show动画
$('#btn-box1').on('click',function(){
$('.box').show(400) // 第二次执行
console.log('showla') // 第一次执行
})
可以把显示showla 代码放到show动画回调函数里
$('#btn-box1').on('click',function(){
$('.box').show(400,function(){ // 第一次执行
console.log('showla') // 第二次执行
})
})
二、清除和停止
(1) .clearQueue
清除动画队列中未执行的动画
(2) .finish
停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态
(3) .stop( [clearQueue ][, jumpToEnd ] )
stop()：停止当前正在运行的动画 ，立刻去执行后面的动画
.stop(true, false) ：停止当前动画，并清除未执行的动画队列
.stop(true, true)：停止当前动画，并清除未执行的动画队列，并且当前动画展示最终状态
clearQueue(default: false)
jumpToEnd(default: false)
demo 地址参考 http://js.jirengu.com/viqiv/1/edit?html,css,output
