如何使用 jQuery 根据内容为 div 高度设置动画
答案:使用jQuery animate()方法
您可以使用 jQuery 的 animate() 方法为 <div> 的高度设置动画。
在下面的示例中，当单击按钮时，一些文本内容会动态添加到 DIV 框中，并使用 jQuery 对生成的新高度进行动画处理。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery 根据内容动画一个 Div 高度</title>
<style>
.box{
width: 350px;
padding: 20px;
border: 1px solid #ccc;
background: #f2f2f2;
}
.box p{
margin: 0;
padding-top: 20px;
}
.box p:first-child{
padding-top: 0;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
/* 定义函数 */
function animateHeight(){
var newHeight = $(".box-inner").height();
$(".box").animate({
height: newHeight,
}, 500);
}
$(".load-more").click(function(){
/* 设置盒子的初始高度 */
$(".box").height($(".box-inner").height());
/* 使用新内容附加框并为高度设置动画 */
var newContent = "<p>Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet non varius gravida nibh. Fusce quam tortor, commodo ac dui quis, bibendum erat.</p>";
$(".box-inner").append(newContent);
animateHeight();
});
});
</script>
</head>
<body>
<button class="load-more">Load Content</button>
<p>每次你点击上面的按钮，一些内容将被添加到盒子中，盒子的高度通过动画调整。</p>
<div class="box">
<div class="box-inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,
dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus
ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non
aliquet sagittis. In tincidunt orci sit amet elementum vestibulum.
Vivamus fermentum in arcu in aliquam. Quisque aliquam.
</p>
</div>
</div>
</body>
</html>FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答:
