jquery - 如何自动平滑地动画div高度

Question

我知道 jQuery animate 函数，我可以用它顺利地改变 div 高度，但问题是:

我有一个 div:

<div class="blah">Content with 3 lines</div>

然后我使用 jQuery 在上面的 div 中添加了更多行，div 高度是 auto 所以它会变长，但不会很顺利，无论如何它可以像使用 jQuery 一样顺利地变长动画函数？

我只是不想在任何附加、ajax 调用等上键入 animate({blah})。

是否可以在每次 div 高度变化时调用一个函数？并使用 animate 函数处理它？<​​/em>

我也读过关于转换的内容，所以我做了:

.blah{
    -webkit-transition: height 1s ease-in-out !important;
    -moz-transition: height 1s ease-in-out !important;
    -ms-transition: height 1s ease-in-out !important;
    -o-transition: height 1s ease-in-out !important;
    transition: height 1s ease-in-out !important;
}

但不工作

附加数据的 jQuery 方法:

$('blah').append('<p style="clear:both;">Another Line</p>')

提前致谢

Answer 1

Demo

jQuery

$("#blah")
    .hide()
    .html('<p>Another Line</p><p>Another Line</p><p>Another Line</p>')
    .slideDown('slow');

CSS

div {
    background:slategray;
    color:white;
    padding:20px;
}