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.