动画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>