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

我在

div

中有一个进入DOM的项

我试图通过淡入来添加此项，我采用了这种方法。但它似乎不起作用

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

00:50:09
00:50:04
00:49:04
​
var out=''；
out+=“测试G”；
$（'.comm'）.prepend（out）；
$（'.messages'）.css（{'opacity'：'1'}）；
$（'.curent'）.removeClass（'messages'）.addClass（'message'）；​
.留言{
不透明度：0；
}​

你也可以在中看到代码

有什么想法吗

Thanlks

这个怎么样：

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

将“不透明度”设置为一个或另一个值不会导致褪色，因为它会立即从旧值更改为新值。您可以使用在新旧不透明度之间进行淡入淡出，但jQuery已经为您提供了这样的功能。仅在调用

.fadeIn（）

之前的元素

---

还请注意，在同一代码块内多次更改同一属性不会产生用户可以看到的动画，因为整个块将在浏览器刷新页面之前执行。因此

.removeClass（'messages'）.addClass（'message'）

没有明显的效果，除非元素没有以“messages”类开头。您需要使用基于

setTimeout（）

的动画（jQuery就是这样使用的），以便浏览器在属性更改之间有机会刷新页面。

您做错了几件事

您可以使用，但现在它希望您的元素是

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

查看工作演示（在此处为单击事件添加了代码）：

#messages{
 display:none;
}​