如何自动平滑动画div高度[不使用animate（）每次]

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

转化仅适用于height属性的直接更改。

在我看来，归档这个的唯一方法是创建一个隐藏的＆＃34;阴影＆＃34; div您将文本放入其中，然后确定高度，然后使用文本和确定的div值更新实际height。

请注意，阴影div需要定义宽度，不要使用display: none因为它会阻止浏览器计算维度 - 请使用left: -100000px。

我希望，这就是你要求的：Fiddle

不是：自动执行此操作（类似事件）不起作用，但您可以将此代码轻松移动到包装函数中。

Answer 2

$('.blah').append('<p style="clear:both; display:none" id='new_div'>Another Line</p>');
$('#new_div').fadeIn();

您甚至可以将其包装在以下函数中：

function appendAnin(parent,childId){
  $(parent).append('<p style="clear:both; display:none" id='"+child+"'>Another Line</p>');
  $("#"+childId).fadeIn();
}

然后调用函数：

appendAnim(".blah","new_div");

Answer 3

首先，您使用的是无效的选择器$('blah')，应该是$('.blah')，并且您想要顺利显示它，因此您需要首先隐藏它然后显示或动画：

示例：

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

fiddle

Answer 4

的 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;
}