CODEWITHSUNDEEP
jqueryjquery-animate
Justin
Justin

Reputation: 45350

Using jQuery To Animate Inserting Text Into Div

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.

Upvotes: 2

Views: 8348

Answers (4)

fardjad
fardjad

Reputation: 20404

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.

Upvotes: 0

zequinha-bsb
zequinha-bsb

Reputation: 719

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!

Upvotes: 0

rkw
rkw

Reputation: 7297

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

Upvotes: 5

janoliver
janoliver

Reputation: 7824

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.

Upvotes: 0

Related Questions