jq-animate:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>标题</title> <meta name="keywords" content=""> <meta name="description" content=""> <style> *{margin:0; padding:0; list-style:none;} .btn{ font-size: 20px; padding: 4px 8px; } .box{ 140px; height: 100px; background: green; font-size: 24px; border: 2px solid blue; position: absolute; left: 40px; top: 60px; } </style> </head> <body> <button class="btn">动画</button> <div class="box">我是div标签</div> <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script> $('.btn').click(function (){ $('.box').animate({ left:'1000px' },{ // queue:true, duration:1000, easing:'swing', complete:function (){ $('.box').css('background','red'); } }).animate({ top:'500px' },{ // queue:true, duration:1000, easing:'swing', complete:function (){ $('.box').css('background','blue'); } }); }) </script> </body> </html>