jquery cada clase añadir con retraso entre

Question

Necesito recorrer cada div .row para agregar o eliminar una clase flip que tenga un efecto de transformación 3D CSS3.

Cuando aplico esta clase para agregar/eliminar a cada ".row" con jquery each(), todos los divs obtienen la clase ".flip" agregada o eliminada al mismo tiempo. Necesito que esto se retrase para que parezca un efecto dominó.

¿Alguna idea de cómo puedo hacer que esto funcione? ¿O cómo agregar/eliminar la clase Flip uno por uno?

Esto es lo que he encontrado, pero no está funcionando:

$('.row').each(function(i){ 
    if($(this).hasClass('flip')){ 
     $(this).delay(i*500).removeClass('flip'); 
    }else{ 
     $(this).delay(i*500).addClass('flip'); 
    } 
    }); 

Answer 1

El método jQuery delay() sólo retrasa las siguientes piezas de la cola de los métodos que utilizan ensartados $(obj).delay(500).addClass('flip'); No retrasa todas las líneas siguientes de código. (mira el first example y cómo el código ejecuta sus animaciones una al lado de la otra)

Intenta usar setTimeout() en su lugar.

$('.row').each(function(i){ 
    var row = $(this); 
    setTimeout(function() { 
    row.toggleClass('flip'); 
    }, 500*i); 
});​ 

Fiddle

Answer 2

usted tiene que utilizar setTimeout hacer un efecto delay.

Aquí es jsFiddle: http://jsfiddle.net/xQkmB/1/

var i = 0; 
var rows = $(".row"); 
show(); 

function show() { 
    if (i < rows.length) { 
     $(rows[i]).show(); 
     i++; 
     setTimeout(show, 1000); 
    }  
} 

Answer 3

La función addClass no es una función de animación, por lo que no consigue en cola, y así se ejecuta inmediatamente sin esperar a la .delay() a fin.

que utilizar esta extensión para hacer cola no animado jQuery llama:

(function($) { 
    $.fn.queued = function() { 
     var self = this; 
     var func = arguments[0]; 
     var args = [].slice.call(arguments, 1); 
     return this.queue(function() { 
      $.fn[func].apply(self, args).dequeue(); 
     }); 
    } 
}(jQuery)); 

que a su código se llama así:

$('.row').each(function(i){ 
    $(this).delay(i*500).queued('toggleClass', 'flip'); 
} 

Nota: el uso de toggleClass en lugar de un complemento condicional/eliminar .