2011-03-14 89 views
3

現在,當我替換「foo」div內的內容時,新內容馬上就會出現。有 有辦法讓新內容慢慢淡入。關於jQuery的.html()函數的問題?

<div class="foo">Initial content to be replaced</div> 

$('div.foo').html('New content'); 

我知道的淡入()函數,我爲什麼問這個問題,因爲我不明白怎麼能說是技術上是可行的,因爲foo的DIV從未隱藏開始的原因,所以如何將它能夠「淡入」。但是,如果有人能想到一種最好的方式。

回答

4

使用此:$('div.foo').html('New Content').hide().fadeIn();

1

Live Demo

$('div.foo').html('New content').hide().fadeIn(); 

你先隱藏起來,然後消失它

+0

你的例子沒有做了一大堆,因爲它執行它的負載魔術。也許在點擊或其他東西? – 2011-03-14 01:37:33

+0

感謝您的建議。 – Loktar 2011-03-14 01:39:19

0

你可以試試這個:

$("div.foo").hide("slow").html("New Content").show("slow"); 

這會淡出div,更改內容,然後淡入,這可能會達到您要查找的效果。

2

這裏的其他一些答案沒有說明轉換需要時間的事實 - html將在fadeOut的中間被替換,看起來像一個錯誤。

假設你想淡出來完成,然後代替HTML,然後淡入,使用回調:

$('div.foo').fadeOut(function() { 
    $(this).html('New content').fadeIn(); 
}); 
+0

OP不希望它淡出..只是淡入。 – Loktar 2011-03-14 02:35:13