jqueryで新たに追加したdivをフェードインする方法は？

Question

私はdivのDOMの中に入っているこのアイテムを持っています。

このアイテムをフェードインして追加しようとしていますが、私はこのアプローチを採用しました。しかし、uはまたjsfiddleでコードを見ることができます

<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; 
}​ 

を動作するようには思えません。

アイデア？それは古い値から新しい値にすぐに変わるので、1または別の値に不透明度を設定する

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

はフェードが発生することはありません。これについて

Thanlks

Answer 1

方法。 .animate() methodを使用して古い不透明度と新しい不透明度をフェードすることができますが、jQueryにはすでに.fadeIn() methodがあります。 .fadeIn()を呼び出す直前の要素は.hide()です。

同じコードブロック内で同じプロパティを何度か変更しても、ブラウザがページを更新する前にブロック全体が実行されるため、アニメーションが表示されないことに注意してください。したがって、最初に 'messages'クラスがない限り、.removeClass('messages').addClass('message')には顕著な効果はありません。 setTimeout()ベースのアニメーション（これはjQueryのanimation effects methodsが使用するものです）を使用して、ブラウザがプロパティの変更の間にページを更新する機会を得るようにする必要があります。

Answer 2

あなたはいくつか間違ったことをしました。

あなたは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; 
}​ 

：
http://jsfiddle.net/2EJdy/8/