动画队列

• 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()
    })