jQuery之动画队列

一、写法方式

(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