• 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