javascript - 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:

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