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

這將保證你的第一個動畫是繼續之前完成。至少在我目前的情況下，衰落比滑動更好。