在jQuery对象中，若存在多个动画方法，这些动画方法会逐一排好队依次进行，于是就形成了动画队列
$('.btn').on('click',function(){
$('.box').hide(function(){
$('.box').show()
})
})
以上的代码等价于下面代码
$('.btn').on('click',function(){
$('.box').hide()
.show()
})
jQuery提供了可以操作动画队列的方法：
clearQueue ：从列队中移除所有未执行的项。
finish ： 停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。
stop([queue] [,clearQueue] [,jumpToEnd]) ： 停止匹配元素当前正在运行的动画。
范例：
<style> .container{ position:relative; } .box{ position:absolute; width:100px; height:100px; background:blue; } </style> <title>动画队列</title> </head> <body> <button class="btn">漂移</button> <button class="btn2">stop</button> <button class="btn3">stop(true,false)</button> <button class="btn4">stop(false,true)</button> <div class="container"> <div class="box"></div> </div> <script> $('.btn').on('click',function(){ $('.box').animate({ top:'500px' },5000) .animate({ left:'200px' },6000) .animate({ '200px' },7000) .animate({ height:'200px' },8000) }) $('.btn2').on('click',function(){ $('.box').stop() //不填参数为默认，跳过当前执行的动画，直接进行下个动画 }) $('.btn2').on('click',function(){ $('.box').stop() //不填参数为默认，跳过当前执行的动画，直接进行下个动画 }) $('.btn3').on('click',function(){ $('.box').stop(true) //当, clearQueue 为true，清空动画队列 }) $('.btn4').on('click',function(){ $('.box').stop(false,true) //当, jumpToEnd 为true，直接展示动画最终效果 }) </script>