如何使用 jQuery 根据内容为 div 高度设置动画
答案：使用jQuery animate()方法
您可以使用 jQuery 的 animate() 方法为 <div> 的高度设置动画。
在下面的示例中，当单击按钮时，一些文本内容会动态添加到 DIV 框中，并使用 jQuery 对生成的新高度进行动画处理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Animate a Div Height According to Content</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>Every time you click the above button some content will be added to box and the height of the box is adjusted through animation.</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 相关问题解答
以下是与此主题相关的更多常见问题解答：
Advertisements