我想通过向下滑动动画来设置 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>
关于javascript - 动画 div 高度以适应新内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33037037/