<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> <script type="text/javascript" src="js/jquery-1.8.2.js"></script> <style type="text/css"> body,hi,h2,h3,h4,h5,h6,p,blockquote,dl,dt,dd,lengend,ul,ol,pre,button,input,textarea,th,td,li,fieldset{padding:0; margin:0;} .flashwk{width:360px; height:179px; margin:50px auto; border:1px solid red;} .shu{width:30px; height:179px; float:right; background-image:url(images/rcjygy.gif); background-repeat:no-repeat; display:none;} .y1{ background-position:-330px 0; height:0;} .y2{ background-position:-300px 0; height:0;} .y3{ background-position:-270px 0; height:0;} .y4{ background-position:-240px 0; height:0;} .y5{ background-position:-210px 0; height:0;} .y6{ background-position:-180px 0; height:0;} .y7{ background-position:-150px 0; height:0;} .y8{ background-position:-120px 0; height:0;} .y9{ background-position:-90px 0; height:0;} .y10{ background-position:-60px 0; height:0;} .y11{ background-position:-30px 0; height:0;} .y12{ background-position:0px 0; height:0;} </style> </head> <body> <div class="flashwk"> <div class="shu y1"></div> <div class="shu y2"></div> <div class="shu y3"></div> <div class="shu y4"></div> <div class="shu y5"></div> <div class="shu y6"></div> <div class="shu y7"></div> <div class="shu y8"></div> <div class="shu y9"></div> <div class="shu y10"></div> <div class="shu y11"></div> <div class="shu y12"></div> </div> <script type="text/javascript"> var arr=[179,160,120,90,120,120,120,120,80,90,120,179]; $(function(){ dh(1); }); function dh(i){ $(".y"+i).css("display","block"); var fl=$(".y"+i).height(); var st=setInterval(function(){ if($(".y"+i).height()>=arr[i-1]){ $(".y"+i).css("height",arr[i-1]); clearInterval(st); if(i>arr.length){ return false; }else{ //每條事後停頓一下 setTimeout(function(){dh(i+1);},16); } }else{ $(".y"+i).css("height",fl++); } },16); } </script> </body> </html>