javascript - 动画div高度以适应新内容

我想设置div高度的动画，以使新内容与下滑动画配合。

的HTML：

<div id="container">
    row 1<br>
    row 2<br>
    row 3<br>
</div>

javascript：

var container = $('#container');
container.click(function() {
    container.hide();
    $(this).html(
        'row 1<br>row 2<br>row 3<br>row 4<br>row 5<br>row 6<br>'
    ).slideDown(500);
});

问题是动画从顶部开始，而不是从当前高度开始。

jsfiddle：https://jsfiddle.net/Lgt4a7fr/3/

最佳答案

您可以使用jQuery animate()。请参见下面的演示。

而且我也在看你下面的代码部分。请考虑单独添加新项目吗？

  element.html(
            'row 1<br>row 2<br>row 3<br>row 4<br>row 5<br>row 6<br>'
        );

如果您只是出于演示目的使用此代码，请忽略。

var container = $('#container');
container.click(function(e) {
   var element = $(this);
   var height = element.height();
    element.hide();
    element.html(
        'row 1<br>row 2<br>row 3<br>row 4<br>row 5<br>row 6<br>'
    ); // please think of appending the new items alone?
    var height2 = element.height();
    element.css({height : height});
    element.show();
    element.animate( {height : height2} , 500);
});

#container {
    border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    row 1<br>
    row 2<br>
    row 3<br>
</div>