Question

我有这个项目进入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;
}

你也可以看到jsfiddle中的代码。

有什么想法吗？

Thanlks

Answer 1

这个怎么样：

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

将不透明度设置为一个或另一个值不会导致淡入淡出，因为它会立即从旧值更改为新值。您可以使用.animate() method淡化旧的和新的不透明度，但jQuery已经有.fadeIn() method为您执行此操作。在调用.fadeIn()之前，只需.hide()元素。

另请注意，在同一代码块中多次更改同一属性不会产生用户可以看到的动画，因为整个块将在浏览器刷新页面之前执行。因此.removeClass('messages').addClass('message')没有明显的效果，除非元素没有“消息”。开始上课。您需要使用基于setTimeout()的动画（这是jQuery＆＃39; s 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/

如何用jquery淡化新添加的div？

2 个答案: