当在jQuery对象上调用动画方法时，如果对象正在执行某个动画效果，那么新调用的动画方法就会被添加到动画队列中，jQuery会按顺序依次执行动画队列的每个动画。可是如果用户的操作比动画快，用户对一个对象频繁操作时不处理动画队列就会造成队列堆积，影响到效果，所以我们可以用以下方法处理队列
.clearQueue
//清除动画队列中未执行的动画
.finish
//停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态
.stop( [clearQueue ] [, jumpToEnd ] )
//停止当前正在运行的动画
clearQueue(default: false)
jumpToEnd(default: false)
例子：
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<button id="btn1">start</button>
<button id="btn2">step+50</button>
<button id="btn3">step-50</button>
<button id="btn4">auto</button>
<button id="btn5">reset</button>
<button id="btn6">stop(false,false)</button>
<button id="btn7">stop(true,false)</button>
<button id="btn8">stop(true,true)</button>
<button id="btn9">finish</button>
<div class="container">
<div class="box"></div>
</div>
<script>
$('#btn1').click(function(){
$('.box').animate({
left: '100px'
}, 1000)
})
$('#btn2').click(function(){
$('.box').animate({
left: '+=50'
}, 1000)
})
$('#btn3').click(function(){
$('.box').animate({
left: '-=50'
}, 1000)
})
$('#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)
})
$('#btn5').click(function(){
$('.box').animate({
left: 0,
top: 0
}, 1000)
})
$('#btn6').click(function(){
//停止当前动画
$('.box').stop()
})
$('#btn7').click(function(){
//停止当前动画，并清除未执行的动画队列
$('.box').stop(true, false)
})
$('#btn8').click(function(){
//停止当前动画，并清除未执行的动画队列，并且当前动画展示最终状态
$('.box').stop(true, true)
})
$('#btn9').click(function(){
//停止当前动画，并清除未执行的动画队列，并且当前动画展示最终状态
$('.box').finish()
})
</script>
</body>
</html>
