jQuery smooth change of innerHTML

Question

I have the code below working like a charm:

var div = $('#div');
div.html('<div>one line</div><div>another line</div>');
div.slideDown('slow');

But the problem comes when I need to change the content (the number of lines):

div.html('<div>one line replacement</div><div>another line replacement</div><div>third line</div>')

This transition is too fast. How to animate this?

Answer 1

You can add an invisible span to the html:

<span class="foo" style="display: none">some other lines</span>

And then fade them in:

$("span.foo").fadeIn('slow');

Going by your edit, you may also want to consider:

div.slideUp('slow'); // you may want this to be 'fast'
div.html('some other lines');
div.slideDown('slow');

Answer 2

A wrinkle on Daniel Sloof's answer:

div.fadeOut('fast', function() {
  div.html(html);
  div.fadeIn('fast');
}

This will ensure your first animation is complete before proceeding. In my current case at least, fading makes a nicer experience than sliding.

Answer 3

Maybe if you put the extra lines into a div with display:none style, then you can fade in that div, something like this (concept - code not tested):

div.html("<div id='next_line' style='display:none'>some other lines</div>");
$("#next_line").fadeIn('slow');

Answer 4

If you want to make it take a certain time, then:

div.slideDown(numberOfMilliseconds);

Answer 5

Thomas mentioned "slideDown(numberOfMilliseconds)". I have tried it and jquery's doc defined the speed in milliseconds is the time taken to execute the amimation.

In that case, 1 line or 10 lines will take the same amount of time to slide. If you know the number of line, perhaps you can add in a multiplier, e.g. slideDown(lineCount * speedInMS)