点击运行
<!DOCTYPE html> <html> <head> <style> div { margin:3px; width:40px; height:40px; position:absolute; left:0px; top:30px; background:green; display:none; } div.newcolor { background:blue; } </style> <script type="text/javascript" src="/static/jquery/jquery.min.js"></script> </head> <body> <button id="start">开始</button> <button id="stop">停止</button> <div></div> <script> $("#start").click(function () { $("div").show("slow"); $("div").animate({left:'+=200'},5000); $("div").queue(function () { $(this).addClass("newcolor"); $(this).dequeue(); }); $("div").animate({left:'-=200'},1500); $("div").queue(function () { $(this).removeClass("newcolor"); $(this).dequeue(); }); $("div").slideUp(); }); $("#stop").click(function () { $("div").clearQueue(); $("div").stop(); }); </script> </body> </html>
运行结果
