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