Using jQuery To Animate Inserting Text Into Div

Question

Is it possible with jQuery to use animate, to fill a div with content smoothly, i.e. animate the height of the div growling larger as I insert content?

For example (HTML):

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

Then (JavaScript):

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

I would like to animate the insert of the html, and thus the height increase.

Answer 1

If you want to truly animate the text in, you would have to slowly append the text, one letter at a time. You can get a similar effect by using what others have mentioned already, .slideDown()

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

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

Answer 2

Maybe you could use a combination of the css attributes overflow:hidden; height:... and jQuery's slideDown() function.

Insert the text into a fixed-height div, determine the new height and animate it.

Answer 3

The answer is very simple: adjust the height automatically and very slowly as you drop more text in the div:

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

That should, probably, do the trick. You might need to adjust the 5000 accordingly.

Also, chances are that a vertical scroll bar would appear so you would want to make the 'thedivid' with overflow:hidden;

Good luck!

Answer 4

you can use slideDown() and slideUp().

something like this:

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

Edit:

you may want to increase the div height smoothly, to do so you can use animate() and height() this way.

I also created a FadeIn sample.