动画队列
jQuery中的animate的自定义动画中，含有动画队列的感念。将所要执行的动画按一个个的排列成一队，并先后顺序的一个个的执行。
### 范例代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Bin</title> <style> .container{ position: relative; } .box { position: absolute; width: 100px; height: 100px; background: red; } </style> <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.js"></script> </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>动画队列的停止和清除
clearQueue
清除动画队列中未执行的动画
.finish
停止当前动画，并清除动画队列中未完成的动画，并展示最终完成动画队列
.stop
- stop（false,false）
停止当前正在运行的动画 - stop(true,false)
停止当前动画，并清除未执行的动画队列 - stop(true,true)
停止当前动画，并清除未执行的动画队列，并且当前动画展示最终状态
### 效果预览
转载请标明出处:动画队列
文章来源: https://blog.csdn.net/KaisonYi/article/details/89874540