1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style> 7 div { margin:3px; width:40px; height:40px; 8 position:absolute; left:0px; top:30px; 9 background:green; display:none; } 10 div.newcolor { background:blue; } 11 </style> 12 13 <script type="text/javascript" src="javascript/jquery-1.11.1.js"></script> 14 </head> 15 16 <body> 17 18 请点击这里。。。 19 <div></div> 20 21 <script> 22 $(document.body).click(function () { 23 $("div").show("slow"); 24 $("div").animate({left:'+=200'},2000,function(){ 25 $("div").addClass("newcolor");//将需要执行的js代码，加在动画的回调函数中也行 26 }); 27 28 // $("div").queue(function () { 29 // $(this).addClass("newcolor"); 30 // $(this).dequeue(); 31 // }); 32 // $("div").addClass("newcolor");//这种执行失败了，因为动画是延迟排队加载，这个先于动画加载了 33 $("div").animate({left:'-=200'},500,function(){ 34 $("div").removeClass("newcolor"); 35 }); 36 // $("div").queue(function () { 37 // $(this).removeClass("newcolor"); 38 // $(this).dequeue(); 39 // }); 40 // $("div").removeClass("newcolor");//执行失败 41 $("div").slideUp(); 42 43 //动画都是异步加载的，但是他们会排队，一个一个执行，但是中间如果要插入一段js执行，则可能必须要加在动画的回调函数中， 44 //才能确保它能顺利执行 45 //但是queue()函数，可以在动画执行队列中，也不需要加在回调函数中 46 //用了queue()函数之后，必须同时搭配dequeue()函数，这样才能执行下一个函数 47 // clearQueue()是清除所有未执行的动画，包括queue()插入的 48 }); 49 </script> 50 51 </body> 52 </html>