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

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

有任何想法吗？

谢谢

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 回答