1 <html> 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 3 <script type="text/javascript" src="jquery-1.11.3.js"></script> 4 <style type="text/css"> 5 #panel{ 6 position:relative; 7 width: 100px; 8 height: 100px; 9 border: 1px solid #0050D0; 10 background: #96E555; 11 cursor:pointer; 12 } 13 </style> 14 <script type="text/javascript"> 15 $(function(){ 16 $("#panel").css("opacity","0.5");//设置不透明度 17 $("#panel").click(function(){ 18 $(this).animate({left:"500px",height:"200px",opacity:"1"},3000) 19 .animate({top:"200px",width:"200px"},3000) 20 .fadeOut("slow"); 21 }); 22 23 }); 24 25 </script> 26 <body> 27 28 <div id="panel"></div> 29 30 </body> 31 </html>
一个小小的动画效果。（读锋利的jquery后写）
单击div元素后让他向右移动的同时增大它的高度，并将它的不透明度从50%变为100%，然后再让它从上到下移动，同时宽度变大，完成后慢慢淡出。
