刚才在仿照迅雷无线的首页做banner的过程中，碰到的这个问题。两个物体分步运动，其中B在A运动结束之后才能继续进行。。。主要的运用了JQ里面的animaet的回调函数。
例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } body{ padding: 10px; } #div1{ width: 100px; height: 100px; background-color: #f00; position: absolute; left: 50px; top: 50px; } #div2{ width: 100px; height: 100px; background-color: #000; position: absolute; left: 400px; top: 50px; opacity: 0; filter: alpha(opacity=0); } </style> <script src="jQuery.js"></script> <script> $(function(){ // alert(1); var oBtn = $('#btn'); var oDiv1 = $('#div1'); var oDiv2 = $('#div2'); oBtn.toggle(function(){ // alert(1); oDiv1.stop().animate({'left':400+'px','opacity':0},600,function(){ oDiv2.stop().animate({'left':50+'px','opacity':1},1200); }); },function(){ oDiv2.stop().animate({'left':400+'px','opacity':0},600,function(){ oDiv1.stop().animate({'left':50+'px','opacity':1},1200); }); }); }); </script> </head> <body> <input type="button" value="开始运动" id="btn" /> <div id="div1"></div> <div id="div2"></div> </body> </html>