jQuery平滑地改变innerHTML

Question

我有下面的代码像魅力:

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

但是当我需要更改内容(行数)时问题就出现了:

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

这种转变太快了.如何动画这个？

Answer 1

您可以在html中添加一个不可见的范围:

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

然后淡出它们:

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

通过编辑,您可能还需要考虑:

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