在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({ ???????width:‘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>jQuery 动画队列
原文地址：https://www.cnblogs.com/ianyanyzx/p/9789278.html