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

请注意，如果您仅将此代码用于演示目的。

＆＃13;

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

＆＃13;

#container {
    border: 1px solid black;
}

＆＃13;

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

＆＃13;

动画div高度以适应新内容

1 个答案: