jquery mỗi lớp thêm vào với sự chậm trễ giữa

Question

Tôi cần lặp qua từng div .row để thêm hoặc loại bỏ một lớp lật có hiệu ứng chuyển đổi 3D CSS3.

Khi tôi áp dụng lớp thêm/xóa này cho mỗi ".row" với jquery each(), tất cả các div nhận được lớp ".flip" được thêm hoặc xóa cùng một lúc. Tôi cần điều này để bị trì hoãn vì vậy nó trông giống như một hiệu ứng domino.

Bất kỳ ý tưởng nào về cách tôi có thể làm việc này? Hoặc làm thế nào để thêm/loại bỏ lớp flip từng cái một?

Đây là những gì tôi đã tìm thấy nhưng nó không làm việc:

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

Answer 1

Phương pháp jQuery delay() chỉ trì hoãn các mảnh tiếp theo trong danh sách các phương pháp kết hợp với nhau sử dụng $(obj).delay(500).addClass('flip'); Nó không trì hoãn tất cả các dòng tiếp theo của mã. (hãy xem first example và cách mã chạy hình động của nó song song)

Hãy thử sử dụng setTimeout() để thay thế.

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

Fiddle

Answer 2

Bạn phải sử dụng setTimeout làm ảnh hưởng delay.

Đây là 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

Chức năng addClass không phải là một chức năng hoạt hình, vì vậy nó không được xếp hàng đợi, và vì vậy chạy ngay mà không cần chờ đợi cho .delay() để kết thúc.

tôi sử dụng phần mở rộng này phải xếp hàng không động jQuery gọi:

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

đó trong mã của bạn sẽ được gọi như sau:

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

NB: sử dụng toggleClass thay vì một add có điều kiện/loại bỏ .