Question

jQuery是否可以使用animate来平滑地填充内容div，即在插入内容时使div的高度变大？

例如（HTML）：

 <div id="my-div"></div>

然后（JavaScript）：

 $("#my-div").html("some new really long string of text which makes the div height increase.");

我想为html的插入设置动画，从而增加高度。

Answer 1

如果您想真正为文本设置动画，则必须慢慢附加文本，一次一个字母。您可以通过使用其他人已经提到的内容获得类似的效果，.slideDown（）

http://jsfiddle.net/rkw79/fCAVp/

$("#my-div")
    .hide()
    .html("some new really long string of text ...")
    .slideDown('slow');

Answer 2

您可以使用slideDown()和slideUp()。

类似的东西：

$("#my-div").slideUp('slow', function() { $("#my-div").html("some new really long string of text which makes the div height increase."); }).slideDown('slow');

修改

您可能希望平滑地增加div高度，为此您可以使用animate()和height() this way。

我还创建了一个FadeIn sample。

Answer 3

也许您可以结合使用css属性overflow:hidden; height:...和jQuery的slideDown()函数。

将文本插入固定高度的div中，确定新的高度并为其设置动画。

Answer 4

答案非常简单：在div中删除更多文本时自动调整高度非常缓慢：

$('#thedivid').append('<p>'+newtextbeingadded+'</p>').animate( { 'height':'auto' },5000 );

那应该可以做到这一点。您可能需要相应地调整5000。

此外，可能会出现一个垂直滚动条，因此您可能希望使用溢出来创建'thedivid'：hidden;

祝你好运！

使用jQuery动画将文本插入Div

4 个答案: