0

DOM内に入るこのアイテムがあります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;
}​

uはjsfiddleのコードも見ることができます。

何か案は？

Thanlks

4

2 に答える 2

2

これはどう：

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

不透明度をいずれかの値に設定しても、古い値から新しい値にすぐに変更されるため、フェードは発生しません。.animate()このメソッドを使用して、古い不透明度と新しい不透明度の間でフェードインすることができますが、jQueryにはすでに.fadeIn() methodそれがあります。.hide()を呼び出す直前の要素.fadeIn()。

また、同じコードブロック内で同じプロパティを数回変更しても、ブラウザがページを更新する前にブロック全体が実行されるため、ユーザーが表示できるアニメーションは作成されないことにも注意してください。したがって.removeClass('messages').addClass('message')、要素に最初から「messages」クラスがない場合を除いて、目立った影響はありません。ブラウザがプロパティの変更の合間にページを更新できるように、setTimeout()ベースのアニメーション（jQueryのアニメーションエフェクトメソッドが使用するもの）を使用する必要があります。

于 2012-03-10T09:17:54.130 に答える
0

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

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/

于 2012-03-10T09:25:25.707 に答える