Copy codeThe Code is 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 the height
$ ("# Zhong" + I + ""). attr ("OldHeight", a); // you can specify the OldHeight attribute.
}
Var e = 0; // define a value
Interid = setInterval (Showgao, 30); // setInerval is loaded every 30 ms
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>
Let's look at the HTML code.
Copy codeThe Code is 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>
The implementation result is like this. I don't know if you can understand it. In fact, you should first set the height of the column and then use JS to dynamically increase from 0 to the desired height.