jQuery中的动画队列

为元素btn绑定一个动画效果，先向右移动300px，再向下移动300px，再向左移动300px，再向上移动300px，也就是回到初始位置

    $('#btn').click(function(){
      $('.box').animate({
        left: '300px'
      }, 1000)
      $('.box').animate({
        left: '300px',
        top: '300px'
      }, 1000)
      $('.box').animate({
        left: '0',
        top: '300px'
      }, 1000)
      $('.box').animate({
        left: '0',
        top: '0'
      }, 1000)
    })

动画的停止与清除

.stop( [clearQueue ] [, jumpToEnd ] ) 方法为被选元素停止当前正在运行的动画

• clearQueue(default: false)
• jumpToEnd(default: false)

1. $('.box').stop()//停止当前动画
   当两个参数值都为false时，点击按钮，元素会停止当前阶段的动画直接向下一个目标位置移动，也就是说案例中的动画分为四个部分，当在执行第二段动画时点击按钮，元素会跳过第二段剩下的动画效果，直接执行第三段动画。
2. $('.box').stop(true, false)`//停止当前动画，并清除未执行的动画队列
   当clearQueue的值为true，jumpToEnd的值为false时，点击按钮，元素会停止当前的动画并清除剩余未执行的动画队列，也就是元素停在原地不动。
3. $('.box').stop(true, true)//停止当前动画，并清除未执行的动画队列，并且当前动画展示最终状态
   当两个参数值都为true时，点击按钮，元素会停止当前动画并清除未执行的动画队列，并直接展示当前动画最终状态。也就是说案例中的四段动画，如果在执行第二段动画时点击此按钮，元素会直接移动到（300,300）的位置并不会执行剩余的动画队列
4. $('.box').finish()//停止当前动画，并清除未执行的动画队列，并且最后动画展示最终状态
   当使用finish()时，点击按钮，元素剩余所有动画队列（包括当前动画未执行的部分）会被清除，并且展示最后动画的最终状态，在次案例中，如果在动画执行过程中点击此按钮，元素会立刻回到动画队列的重点也就是起始位置