Javascript – jQuery smooth change of innerHTML


I have the code below working like a charm:

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

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?

Best Answer

You can add an invisible span to the html:

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

And then fade them in:


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