日期:2014-05-16 浏览次数:20316 次
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>停止普通的多动画</title> <style type="text/css"> * { margin: 0; padding: 0; } body { padding: 60px; } #panel { position: relative; width: 100px; height: 100px; border: 1px solid #0050D0; background: #96E555; cursor: pointer; } </style> <script src="../../../JS/jquery-1.4.2.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> $(document).ready( function() { $("#panel").css("opacity", "0.5"); $("#btnStart").click( function() { $("#panel").animate({ left: "400px", height: "200px", opacity: "1" }, 3000) .animate({ top: "200px", width: "200px" }, 3000) .fadeOut("slow"); } ); $("#btnStop").click( function() { $("#panel").stop().animate({ left: "400px", height: "200px", opacity: "1" }, 3000) } ); } ); </script> </head> <body> <div id="panel"> </div> <input id="btnStart" type="button" value="start" /> <input id="btnStop" type="button" value="stop" /> </body> </html>