JS中for循序中延迟加载动态效果的具体实现

　　<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>

　　<script type="text/javascript">

　　$(function(){

　　for(var i=1; i<6;i++)

　　{

　　var a=$("#zhong"+i+"").height();   //获取高度

　　$("#zhong"+i+"").attr("OldHeight",a); //设置OldHeight属性

　　}

　　var e=0; //定义一个值

　　interid=setInterval(Showgao,30);  //setInerval 每隔30ms加载一次

　　function Showgao()

　　{

　　e++;

　　for(var x=1;x<6;x++)

　　{

　　var b= $("#zhong"+x+"").attr("OldHeight");   

　　if(typeof(b) == "undefined"||b!="")

　　{

　　if(e>b){$("#zhong"+x+"").height(b);}

　　else{$("#zhong"+x+"").height(e);}

　　}

　　}

　　if(e==1000){clearInterval(interid);}

　　}

　　});

　　</script>

　　<div class="zhu no1">

　　<div class="tou"><img src="images/toubg.png" /></div>

　　<div id="zhong1" class="zhong" style="height:66px;"></div>

　　<div class="wei"><img src="images/weibg.png" /></div>

　　</div>

　　<div class="zhu no2">

　　<div class="tou"><img src="images/toubg.png" /></div>

　　<div id="zhong2" class="zhong" style="height:0px;"></div>

　　<div class="wei"><img src="images/weibg.png" /></div>

　　</div>

　　<div class="zhu no3">

　　<div class="tou"><img src="images/toubg.png" /></div>

　　<div id="zhong3" class="zhong" style="height:22px;"></div>

　　<div class="wei"><img src="images/weibg.png" /></div>

　　</div>

　　<div class="zhu no4">

　　<img src="images/huisebg.png" />

　　</div>