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

Question

我想为 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/

Answer 1

您可以为 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>