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.