javascript - 每个循环淡入淡出动画中的 jQuery 异步行为

Question

我对 JS 的异步行为有一个小问题。我的计划是循环浏览一些隐藏的图像，并以指定的 FadeIn、FadeOut 和 Staytime 淡入和淡出它们。我尝试使用以下代码来执行此操作:

jQuery('.fader img').each(function(x, y) {

    var faderImg = jQuery(y);
    faderImg.fadeIn(400).delay(1000).fadeOut(400);

});

我的问题是，它不等待最后一个链接的 fadeOut 语句的执行，而是同时在每张图片上执行动画。我也用 async 和 wait 尝试过，但它没有解决我的问题，因为它具有与上述相同的行为。

jQuery('.b1-img-fader img').each(async function(x, y) {

  var faderImg = jQuery(y);
  await faderImg.fadeIn(400).delay(1000).fadeOut(400);

});

有人可以帮忙存档，在之前的图像完成淡出后，每个图像都会淡入吗？如果内部功能完成，循环应该只开始下一轮。

感谢您的帮助!

Answer 1

假设您希望每个图像单独制作动画，您需要延迟每个连续的图像，以完成所有先前图像所需的时间。

为此，您可以通过将当前图像的索引乘以动画所花费的时间来获得延迟量，如下所示:

$('.b1-img-fader img').each(function(index, el) {
  $(this).delay(index * 1800).fadeIn(400).delay(1000).fadeOut(400);
});