Chờ một jQueryanimation để hoàn thành trong vòng lặp for

Question

Tôi có một cái gì đó giống như đoạn mã sau

for(i=0, j=10; i<j ; i++){ 
    $('#an-element-'+i).fadeIn(); 
} 

Làm thế nào để làm cho nó để mỗi lần lặp trong vòng lặp sẽ chỉ bắt đầu khi fadeIn(); hoạt hình đã hoàn thành?

chỉnh sửa --- xin lỗi của tôi xấu, tôi đã không bao gồm các 'i' trong vòng lặp

Answer 1

for vòng lặp đồng bộ, nhưng hoạt ảnh không đồng bộ. Bạn sẽ cần phải sử dụng đệ quy.

var i = 0, j = 10; 
(function fadeNext() { 
    if (i < j) { 
     $('#an-element-' + i++).fadeIn(fadeNext); 
    } 
})(); 

http://jsfiddle.net/uq9mH/

Answer 2

Theo mã của bạn, vòng lặp của bạn sẽ chỉ mờ dần trong cùng một nguyên tố 10 lần.

Trong mọi trường hợp, những gì bạn cần là đặt cuộc gọi trong khi gọi lại của phương pháp fadeIn: http://api.jquery.com/fadeIn/

Something như thế này nên làm việc (không kiểm tra)

var counter = 10; 
function fadeIn(elem) { 
    $(elem).fadeIn('slow', function(){ 
     if (counter > 0) { 
      fadeIn(elem); //up to you how you figure out which element to fade in 
     } 
    }); 
    counter--; 
} 

//var elem = $('.something'); 
fadeIn(elem); 

Answer 3

Bạn có thể thực thi mã sau một hoạt ảnh bằng cách đặt nó vào một hàm được chuyển thành tham số gọi lại:

$("#foo").fadeIn("slow",function() { 
    alert("done"); 
}); 

Nhưng không rõ bạn đang cố gắng làm gì. Bạn có fading cùng một yếu tố 10 lần?

Answer 4

Hãy thử điều này:

for (i = 0, j = 10; i < j; i++) { 
    $('.try').each(function() { 
     $(this).delay(1000).fadeOut().delay(1000).fadeIn(); 
    }); 
} 

Bạn có thể thay đổi thời hạn thời gian bên trong hàm sự chậm trễ. Here is the jsFiddle.

Answer 5

nếu bạn có một sự chậm trễ cố định cho tất cả các mục mà bạn có thể sử dụng dòng mã này:

$(this).fadeIn().delay(2000).fadeOut(); 

thay vì

$(this).fadeIn();