Làm thế nào để animate một tập hợp các đối tượng jQuery cùng một lúc (thay vì tất cả cùng một lúc)

Question

Tôi đang cố gắng tạo thanh trượt hình ảnh. (Tôi biết có rất nhiều plug-in ngoài kia, nhưng điều này là nhiều hơn cho các mục đích giáo dục). Về cơ bản, tôi có một tập hợp các hình ảnh với chỉ mục z: 0. Những gì tôi đang cố gắng thực hiện là lấy bộ ảnh, sau đó chọn từng hình ảnh và thay đổi chỉ mục thành 1, tạo hiệu ứng cho độ mờ đục, và sau đó đặt nó trở lại 0, để hình ảnh tiếp theo sẽ làm điều tương tự.

Đây là phần đầu tiên, nhưng vấn đề tôi gặp phải là khi tôi thử nghiệm phần này, tất cả các hình ảnh đều làm hoạt ảnh cùng một lúc. Thay vì làm cái này sau cái kia. Tôi biết rằng bạn có thể sử dụng chức năng gọi lại như:

image1.animate(the animation, function({ 
     image2.animation(the animation, function({ 
       image3.animation(the animation, function}) etc... 

})

Nhưng nếu tôi đã có nhiều hình ảnh nó sẽ trở nên phức tạp hơn. Tôi đang cố gắng tìm một cách hiệu quả hơn để làm điều này, nhưng tôi không tìm ra câu trả lời.

Đây là những gì tôi đã cố gắng:

images.each(function() { 
    $(this).css({ 
     "opacity" : "0.0", 
     "z-index" : "1" 
    }).animate({ 
     opacity: "1.0" 
    }, 3000); 
}); 

nhưng nó không hoạt động. Tất cả các hình ảnh làm các hình ảnh động cùng một lúc. Tôi thậm chí đã thử với một vòng lặp "cho", nhưng tôi nhận được cùng một điều:

for (var i=0; i<images.length; i++){ 
    images.eq(i).css({ 
     "opacity" : "0.0", 
     "z-index" : "1" 
    }).animate({ 
     opacity: "1.0" 
    }, 3000); 
} 

Tôi biết tôi đang làm điều gì đó sai, nhưng tôi không thể tìm ra nó là gì. Nếu bất cứ ai có bất kỳ trợ giúp nó sẽ được đánh giá rất nhiều!

Answer 1

Sử dụng một .delay(), như thế này:

images.each(function (i) { 
    $(this).delay(3000*i) 
      .css({ opacity : 0, "z-index": 1 }) 
      .animate({ opacity: 1 }, 3000); 
}); 

Vì đây sử dụng các chỉ số của phần tử thông qua như là tham số đầu tiên để gọi lại .each() là người đầu tiên bị trì hoãn 3000*0 ms, do đó, không gì cả, sự chậm trễ thứ hai cho 3000ms, v.v ... để chúng sinh động sau cái khác.

Answer 2

Sử dụng .queue() để thiết lập chúng http://api.jquery.com/queue/

Answer 3

Nếu bạn không muốn sử dụng delay (đó là cách tôi muốn làm điều này), bạn có thể làm một cái gì đó như thế này, sử dụng một hàm đệ quy.

function animateImage(images, i) { 
  $(this).css({ 
   "opacity" : '0.0', 
   "z-index" : "1" 
  }).animate({ 
     opacity: "1.0" 
    }, 3000, function() { 
     var next = i + 1; 
    
     if (next < images.length) { 
      animateImage(images, next); 
     } 
    }); 
} 

animateImage(images, 0);