Chaining hình ảnh động jQuery ảnh hưởng đến các yếu tố khác nhau

Question

$(document).ready(function() { 
    $("#div1").fadeIn("slow"); 
    $("#div2").delay(500).fadeIn("slow"); 
    $("#div3").delay(2000).fadeIn("slow"); 
    $("#div4").delay(8000).fadeIn("slow"); 
}); 

Đây là thiết lập hiện tại của tôi nhưng tôi cảm thấy đây không phải là cách tốt nhất để viết điều này. Tôi không thể tìm thấy bất kỳ ví dụ về cách bạn sẽ viết này tốt hơn cho thời gian. Bất kỳ giúp đỡ? Tôi đánh giá cao nó.

Tôi cũng nên thêm rằng thời gian của mỗi phần tử không nhất quán.

Answer 1

fadeIn lấy hàm gọi làm tham số thứ hai. Lệnh gọi đó được thực thi ngay khi hoạt ảnh hoàn tất. Nếu bạn muốn các yếu tố mờ dần trong tuần tự, bạn có thể chuỗi các callbacks:

$(document).ready(function() { 
    $("#div1").fadeIn("slow", function(){ 
     $("#div2").fadeIn("slow", function(){ 
      $("#div3").fadeIn("slow", function(){ 
       $("#div4").fadeIn("slow"); 
      }); 
     }); 
    }); 
}); 

Điều này có thể được viết lại sử dụng một loạt các bộ chọn và một phương pháp duy nhất, nếu bạn cảm thấy như nó:

var chain = function(toAnimate, ix){ 
    if(toAnimate[ix]){ 
     $(toAnimate[ix]).fadeIn('slow', function(){ chain(toAnimate, ix + 1)}); 
    } 
}; 

$(document).ready(function(){ 
    chain(['#div1', '#div2', '#div3', '#div4'], 0); 
}); 

See this last one in action at JSBin.

Answer 2

Tôi sẽ làm điều đó trong một vòng lặp, miễn là bạn đang nói về một mức tăng nhất quán (và miễn là chúng xuất hiện theo cùng thứ tự trên trang).

$("#div1,#div2,#div3,#div4").each(function(idx) { 
    $(this).delay(idx * 1000).fadeIn("slow"); 
}); 

Ví dụ:http://jsfiddle.net/km66t/

này sử dụng các chỉ số đi ngang qua .each() để tăng sự chậm trễ.

Vì vậy, bạn đang có hiệu quả thực hiện:

$("#div1").delay(0).fadeIn("slow"); 
$("#div2").delay(1000).fadeIn("slow"); 
$("#div3").delay(2000).fadeIn("slow"); 
$("#div4").delay(3000).fadeIn("slow"); 

---

EDIT: Để hy vọng giải quyết vấn đề trong các bình luận dưới đây, thay vào đó bạn có thể lưu trữ một mảng của sự chậm trễ bạn muốn sử dụng, và truy cập chỉ mục thích hợp của Mảng bằng cách sử dụng chỉ mục từ .each().

var delays = [0, 1000, 2000, 4000]; 

$("#div1,#div2,#div3,#div4").each(function(idx) { 
    $(this).delay(delays[ idx ]).fadeIn("slow"); 
}); 

Answer 3

Không hài lòng với câu trả lời cung cấp, đây là những gì tôi đã sử dụng:

var $steps = $('#div1, #div2, #div3'); 
    // iterate throught all of them 
    $.each($steps,function(index,value){ 
     $stage.fadeIn('slow', function(){ 
      // You can even do something after the an animation step is completed placing your code here. 
      // run the function again using a little introspection provided by javascript 
      arguments.callee 
     }); 
    }) 

Bằng cách này bạn không cần phải khai báo chậm trễ.

Answer 4

Điều này có thể được thực hiện thanh lịch kể từ 1.8:

$("div").toArray().map(function(e){ 
    return function(){ 
     return $(e).fadeIn(600).promise() 
    }; 
}).reduce(function(cur, next){ 
    return cur.then(next); 
}, $().promise()); 

http://jsfiddle.net/f3WzR/