how to fade in newly added div with jquery?

Question

I have this item that comes in into the DOM inside a div.

I am trying to add this item by fading it in, and i took this approach. But it doesn't seem to work

<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 can see the code in jsfiddle also.

Any ideas?

Thanlks

Answer 1

How about this:

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

Setting the opacity to one or another value doesn't cause a fade because it changes immediately from the old value to the new value. You can use the .animate() method to fade between the old and new opacities, but jQuery already has the .fadeIn() method to do it for you. Just .hide() the element immediately before calling .fadeIn().

Note also that changing the same property several times within the same code block will not result in an animation that the user can see because the whole block will execute before the browser refreshes the page. So .removeClass('messages').addClass('message') has no noticeable effect unless the element(s) didn't have the 'messages' class to begin with. You need to use setTimeout() based animation (which is what jQuery's animation effects methods use) so that the browser gets a chance to refresh the page in between property changes.

Answer 2

You did a couple things wrong.

You could use JQuery.fadeIn(); but now it expects your element to be display:none so you have to change your css. I also added a click handler in my demo below so you can see the effect properly and tweak it.

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

And your css:

#messages{
 display:none;
}​

See a working demo (Added code to the click event here):
http://jsfiddle.net/2EJdy/8/