In JS for sequential delay loading dynamic effect of the implementation of the concrete _ basic knowledge

Copy Code code as follows:

<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 (); Get height
$ ("#zhong" +i+ ""). attr ("OldHeight", a); Setting the OldHeight Property
}
var e=0; Define a value
Interid=setinterval (showgao,30); Setinerval every 30ms load
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>

And look at the HTML code.

Copy Code code as follows:

<div class= "Zhu No1" >
<div class= "tou" ></div>
<div id= "zhong1" class= "Zhong" style= "height:66px"; ></div>
<div class= "Wei" ></div>
</div>
<div class= "Zhu No2" >
<div class= "tou" ></div>
<div id= "zhong2" class= "Zhong" style= "height:0px"; ></div>
<div class= "Wei" ></div>
</div>
<div class= "Zhu No3" >
<div class= "tou" ></div>
<div id= "Zhong3" class= "Zhong" style= "height:22px"; ></div>
<div class= "Wei" ></div>
</div>
<div class= "Zhu No4" >

</div>

Implementation of the effect is such, I do not know whether we can understand, in fact, is the first set the height of the cylinder, and then with JS dynamic from 0 to rise, preferably to set a good height