一、在动画队列中将function(){}插入队列的方法有两种，其一是写在某动画函数（如animate,fadeIn等）的callback中，另一种是利用queue
<!DOCTYPE html> <html> <head> <style> div { margin:3px; width:50px; position:absolute; height:50px; left:10px; top:30px; background-color:yellow; } div.red { background-color:red; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <button>Start</button> <div></div> <script> $("button").click(function () { //可以连着写，分开写为了方便看 $("div").animate({left:'+=200px'}, 2000); $("div").animate({top:'0px'}, 600); $("div").queue(function () { $(this).toggleClass("red"); $(this).dequeue(); //此处若不调用dequeue()，动画则到此为止 }); $("div").animate({left:'10px', top:'30px'}, 700); }); </script> </body> </html>
二、介绍一个用来管理动画队列（包括timeout之类的）的方法，用一个数组来保存动画属性及类别，然后在需要停止的时候将其挨个杀掉
var queue=[]; $("#startAnimation").click(function () { queue.push({val:$("#A").animate({left:'+=200px'},2000), type:'animation'}); queue.push({val:$("#B").animate({top:'0px'}, 600), type:'animation'}); queue.push({val:$("#A").queue(function () { $(this).toggleClass("red"); $(this).dequeue();}), type:'function'}); queue.push({val:setTimeout(function(){},2000),type:'timeout'}); }}); $("#stopAnimation").click(function(){ $.each(queue,function(i){ swith(queue[i].type) { case 'animation' : $(queue[i].val).clearQueue().stop(true, false);
break; case 'timeout' : clearTimeout(queue[i].val); break; case 'interval' : clearInterval(queue[i].val); break; case 'function' : $(queue[i].val()); break; } }); queue=[]; })
