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

Answer 2

如果你想让它需要一定的时间，则：

div.slideDown(numberOfMilliseconds); 

Answer 3

也许如果你把多余的线条与显示一个div：没有风格，那么您可以在该专区褪色，像这样（的概念 - 代码未测试）：

div.html("<div id='next_line' style='display:none'>some other lines</div>"); 
$("#next_line").fadeIn('slow'); 

Answer 4

托马斯提到“slideDown（numberOfMilliseconds）”。我试过了，jquery的doc定义了以毫秒为单位的速度是执行amimation所花费的时间。

在这种情况下，1行或10行将花费相同的时间进行滑动。如果你知道线的数量，也许你可以添加一个乘数，例如了slideDown（lineCount * speedInMS）

Answer 5

丹尼尔·Sloof的回答皱纹：

div.fadeOut('fast', function() { 
    div.html(html); 
    div.fadeIn('fast'); 
} 

这将保证你的第一个动画是继续之前完成。至少在我目前的情况下，衰落比滑动更好。