使用jQuery动画将文本插入Div

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

例如（HTML）：

然后（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

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

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

Answer 3

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

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

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

此外，很可能会出现一个垂直滚动条，所以你想要使用overflow：hidden来制作’thedivid’;

祝好运！

Answer 4

你可以使用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高度，这样你可以用this way使用animate()和height() 。

我还创建了一个FadeIn sample 。