动画队列主要用到jQuery的queue、dequeue和clearqueue。
1.queue（）函数主要是将一个动画函数数组绑定到一个队列上
2.dequeue（）函数主要是执行队列的第一个函数，并从队列中删除。
3.clearqueue（）函数是清除动画队列。
<!DOCTYPE html> <html> <head> <title>queue</title> <meta charset="utf-8"> <script type="text/javascript" src="js/jquery.js"></script> <style type="text/css"> img{ width:400px; height:300px; position: absolute; bottom:100px; right:100px; } </style> </head> <body> <!-- 设置五幅图片 --> <div> <img src="img/1.jpg" alt="图片1" class="one"> <img src="img/2.jpg" alt="图片2" class="two"> <img src="img/3.jpg" alt="图片3" class="three"> <img src="img/4.jpg" alt="图片4" class="four"> <img src="img/5.jpg" alt="图片5" class="five"> </div> <script type="text/javascript"> $(function(){ //创建函数数组aniList，定义动画队列的执行顺序（按照函数数组的indexof）。 var aniList = [ function(){ $('.one').delay(500).animate({right : "+=800px" ,bottom : "+=600"},1000,nextQueue) } , function(){ $('.two').delay(500).animate({right : "+=640px" ,bottom : "+=480"},1000,nextQueue) } , function(){ $('.three').delay(500).animate({right : "+=480px" ,bottom : "+=360"},1000,nextQueue) } , function(){ $('.four').delay(500).animate({right : "+=320px" ,bottom : "+=240"},1000,nextQueue) } , function(){ $('.five').delay(500).animate({right : "+=160px",bottom : "+=120"},1000,nextQueue) } ]; //将队列名称定义为aniName $('div').queue('aniName',aniList); //取出动画队列aniName的第一个动画函数并执行 var nextQueue = function(){ $('div').dequeue('aniName'); }; nextQueue(); $("<button>right</button>") .appendTo('body').bind("click",function(){ //清除动画队列。 $('div').clearQueue('aniName'); return false; }) }) </script> </body> </html>
