jquery each dodaj klasę z opóźnieniem między

Question

Potrzebuję pętli przez każdy div .row, aby dodać lub usunąć klasę klapki, która ma efekt transformacji 3D CSS3.

Kiedy stosuję tę klasę dodawania/usuwania do każdego ".row" z jquery each(), wszyscy divy otrzymują klasę ".flip" dodaną lub usuniętą w tym samym czasie. Muszę to opóźnić, żeby wyglądało jak efekt domina.

Masz pomysł, jak to działa? Albo jak dodać/usunąć klasę klapki jeden po drugim?

To co znalazłem, ale to nie działa:

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

Answer 1

Metoda jQuery delay() opóźnia tylko kolejne kawałki w kolejce nawleczone razem metod wykorzystujących $(obj).delay(500).addClass('flip'); To nie opóźnia wszystkie kolejne wiersze kodu. (sprawdź kod first example i sposób jego animacji obok siebie).

Spróbuj użyć zamiast tego setTimeout().

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

Fiddle

Answer 2

Musisz użyć setTimeout zrobić efekt delay.

Oto 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

Funkcja addClass nie jest funkcja animacji, więc nie ma się w kolejce, a więc działa natychmiast, bez oczekiwania na .delay() aby zakończyć.

Używam tego rozszerzenia w kolejce nieanimowane jQuery zwraca:

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

które w kodzie by nazwać tak:

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

Uwaga: używanie toggleClass zamiast warunkowego dodaj/usuń .