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