¿Cómo se desvanecen en div recién agregado con jquery?

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 también.

¿Alguna idea?

Gracias

preguntado el 10 de marzo de 12 a las 09:03

2 Respuestas

Qué tal esto:

$('.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() Método 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.

respondido 10 mar '12, 09:03

You did a couple things wrong.

Podrías usar 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');

Y tu css:

#messages{
 display:none;
}​

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

respondido 10 mar '12, 09:03

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.