如何自动平滑动画div高度

Question

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

我有一个div：

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

然后我使用jQuery向上面的div添加更多的行，div高度为auto所以它会更长，但不是很顺利，无论如何它可以更顺利地使用jQuery animate函数？

我只是不想在任何追加，ajax调用等上输入动画（{blah}）。

是否可以在每个div height changes上调用一个函数？并使用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;
}

Answer 2

你可以尝试这个，但最好是创建一个动画高度的全局函数或尝试使用pc-shooter方法。

 $(blah).change(function() { // Do something });

也许这可以帮到你：http://jsfiddle.net/edelman/Pb6FF/

Answer 3

height:auto无法与 CSS过渡

一起使用

必须定义高度（ px 或百分比，而不是自动）才能使转换有效。

您可能希望在JavaScript上添加此内容

// Get the height of 'blah' from document
heightOfBlah = $('.blah').height();

// Set the height of 'blah' explicitly
$('.blah').css('height', heightOfBlah);

明确设置后，CSS转换将起作用。