jQuery cada uno() con un retraso

Question

Por lo tanto, me gustaría un elemento a desaparecer y esperar medio segundo, luego se desvanecen en la siguiente etc ...

Mi código:

$('.comment').each(function() {     
        $(this).css({'opacity':0.0}).animate({ 
         'opacity':1.0 
        }, 450).delay(500); 
       }); 

I Obviamente estoy haciendo algo realmente tonto .... (Espero) ... Mi pregunta es: ¿esto es posible? si no, ¿alguien puede señalarme en la dirección correcta?

¡Gracias!

Answer 1

O algo así:

$.each($('.comment'), function(i, el){ 

    $(el).css({'opacity':0}); 

    setTimeout(function(){ 
     $(el).animate({ 
     'opacity':1.0 
     }, 450); 
    },500 + (i * 500)); 

}); 

demostración =>http://jsfiddle.net/steweb/9uS56/

Answer 2

Trate de hacer esto:

var time = 500; 
$('.comment').each(function() {     
    var $this = $(this); 
    function delayed() { 
     $this.css({'opacity':0.0}).animate({ 
        'opacity':1.0 
       }, 450); 
    } 
    setTimeout(delayed , time); 
    time += 500; 
}); 

Answer 3

Esta función se repetirá a través de cada elemento de la colección (en este ejemplo $comments) y se desvanecen en todos ellos. Cada animación comenzará cuando la anterior haya terminado.

var $comments=$('.comment'); 

(function fadeIterator($collection, index) { 
    $collection.eq(index).fadeIn(1000, function() { 
     fadeIterator($collection, index++); 
    }); 
}($comments, 0)); 

jsFiddle Demo

Answer 4

o el uso de .next() y una función de devolución de llamada:

// create a function to fade in the comment block 
function showit(item){ 

    // animate the fade effect (and any other required) 
    item.animate({opacity:1},450,function(){ 

     // after completing the animation, call the 
     // showit function with the next comment block 
     showit(item.next('.comment')) 

    }) 

} 

// set the opacity of comment blocks to 0 and 
// select the first one, then call showit to 
// initialise animation loop 
showit($('.comment').css({opacity:0}).eq(0)) 

violín aquí: http://jsfiddle.net/rJnnZ/

Creo que esta es una mejor solución, porque se espera hasta que la animación anterior finaliza, antes de pasar al siguiente, en lugar de calcular el temporizador de antemano, que puede convertirse en un-s se ha sincronizado con un uso intensivo de la CPU u otras circunstancias.

Answer 5

intentar algo como esto

$(this).find('#results').children().each(function(index){ 
     $(this).delay(500 * index).slideDown(500); 
})