jQuery实现动态高度延迟加载效果

作者：页面旅途

时间：2026-10-28

本文介绍如何利用jQuery结合setInterval定时器，实现页面元素高度的动态加载效果。通过预先获取目标高度并存储，利用循环逐步更新DOM元素的height属性，从而模拟从0增长到设定高度的动画过程。代码包含完整的JS逻辑与HTML结构示例，适用于需要平滑过渡效果的Web开发场景。

文章目录

jQuery动态高度加载实现代码

具体实现代码如下：

<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!="")\n {
if(e>b){$("#zhong"+x+"").height(b);}\n else{$("#zhong"+x+"").height(e);}\n }\n }\n if(e==1000){clearInterval(interid);}\n }\n\n });\n</script>

HTML结构示例

接下来查看对应的HTML结构代码

具体HTML代码如下：

<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>