Вы можете использовать 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-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
// Defining the 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">Загрузить контент</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>
