动画div高度以适应新内容

Question

I want to animate div height to fit new content with slide down animation.

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

The problem is that animation start from top, not from current height.

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

Answer 1

You can use for the jQuery animate() . Please see the below demo.

and also i was looking on your below part of the code. please think of appending the new items alone ?

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

Kindly ignore if you have used this code just for demo purpose.

 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>