如何使用jquery淡入新添加的div？

我有這個項目進入DOM內div。如何使用jquery淡入新添加的div？

我想通過淡入淡出來添加此項目，並採取了這種方法。但它似乎並不工作

<div id="messages" class="comm"> 
    <div class="message">00:50:09</div> 
    <div class="message">00:50:04</div> 
    <div class="message">00:49:04</div> 
</div> 

var out = ''; 
out += '<div class="curent">testingg</div>'; 

$('.comm').prepend(out); 
$('.messages').css({'opacity':'1'}); 
$('.curent').removeClass('messages').addClass('message'); 

.messages{ 
    opacity: 0; 
}

你也可以看到代碼jsfiddle也。

任何想法？

Thanlks

來源

2012-03-10 Patrioticcow

它進入的厄運！ – elclanrs 2012-03-10 09:14:48

但它不'褪色' – Patrioticcow 2012-03-10 09:16:24

如何：

$('.curent').hide().fadeIn();

不透明度設置爲一種或另一種價值，因爲它從舊值新值立即改變不會導致褪色。您可以使用.animate() method淡入淡出舊的和新的不透明，但jQuery已經有.fadeIn() method爲您做。只需.hide()即刻致電.fadeIn()之前的元素。

還請注意，在同一代碼塊內多次更改同一屬性不會產生用戶可以看到的動畫，因爲整個塊將在瀏覽器刷新頁面之前執行。所以.removeClass('messages').addClass('message')沒有明顯的效果，除非元素沒有「消息」類開始。您需要使用基於setTimeout()的動畫（這是jQuery的animation effects methods使用的），以便瀏覽器有機會刷新屬性更改之間的頁面。

來源

2012-03-10 09:17:54 nnnnnn

嗯..似乎工作。等一下。讓我測試它 – Patrioticcow 2012-03-10 09:20:52

你做了一些事情錯了。

你可以使用JQuery.fadeIn();但現在它期望你的元素是display:none所以你必須改變你的CSS。我還在下面的演示中添加了一個點擊處理程序，以便您可以正確看到效果並對其進行調整。

var out = ''; 
out += '<div class="curent">testingg</div>'; 
$('.comm').prepend(out); 
$('#messages').fadeIn("slow");//<<fade in from display:none 
// ^^ note: you needed to target id="messages" not class. 
$('.curent').removeClass('messages').addClass('message');

而且你的CSS：

#messages{ 
display:none; 
}

看到一個工作演示（由代碼到Click事件在這裏）：
http://jsfiddle.net/2EJdy/8/

來源

2012-03-10 09:25:25 gideon

如何使用jquery淡入新添加的div？

回答

相關問題