jQuery jede Klasse mit Verzögerung dazwischen hinzufügen

Question

Ich muss durch jedes div.row durchlaufen, um eine Flip-Klasse hinzuzufügen oder zu entfernen, die einen CSS3 3D-Transformationseffekt hat.

Wenn ich diese add/remove-Klasse auf jede ".row" mit jquery each() anwenden, erhalten alle divs die Klasse ".flip" zur genau gleichen Zeit hinzugefügt oder entfernt. Ich muss das verzögern, damit es wie ein Domino-Effekt aussieht.

Irgendeine Idee, wie ich das zum Funktionieren bringen kann? Oder wie man die Flip-Klasse einzeln hinzufügt/entfernt ??

Dies ist, was ich gefunden habe, aber es funktioniert nicht:

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

Answer 1

Die jQuery delay() Methode verzögert nur die nächsten Stücke in der Warteschlange zusammen Methoden aufgereiht $(obj).delay(500).addClass('flip'); unter Verwendung Es alle nachfolgenden Zeilen nicht verzögern von Code. (Überprüfen Sie die first example und wie der Code seine Animationen nebeneinander läuft)

Versuchen Sie mit setTimeout() statt.

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

Fiddle

Answer 2

Sie haben setTimeout zu verwenden, um eine delay Wirkung zu tun. Hier

ist 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

Die addClass Funktion ist keine Animation Funktion, so dass es nicht die Warteschlange gestellt bekommt, und so läuft sofort ohne Warten auf die .delay() zu beenden.

Ich benutze diese Erweiterung in die Warteschlange nicht animierte jQuery ruft:

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

, die im Code genannt wäre also:

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

NB: mit toggleClass anstelle eines bedingten hinzufügen/entfernen .