javascript - 如何一张一张地淡入图像？

Question

我已经看到使用链接 settimeout 来执行此操作的示例。但是，这不适用于无限数量的图像。在多个图像上调用的 .each 函数会导致它们同时淡入。有没有像 .each 这样的函数可用于在执行中阻塞的循环？

Answer 1

您可以使用 jQuerydelay方法：

$('img').each(function(i) {
   $(this).delay(i * 400).fadeIn();
});

Answer 2

“有没有像 .each 这样的函数可用于在执行中阻塞的循环？”

不。

“我已经看到使用链接 settimeout 来执行此操作的示例。但是，这不适用于无限数量的图像。”

如果函数将自身用作回调，它将起作用。例如：

var images = [ '#img1', '#img2', '#img3' ], index = 0;
function fade() {
  if (index < images.length) {
    $(images[index++]).fadeIn(fade);
  }
}
fade();

Answer 3

function fadeInComplete(i,$imgs)
{

  if (i >= $imgs.length) return;
  $imgs[i].fadeIn(400,fadeInComplete.bind(i+1,$imgs);
}

$imgs = $('img');
fadeInComplete(0,$imgs);

Answer 4

你永远不应该在 JavaScript 中使用（甚至考虑）阻塞方法。您可以为方法指定回调fadeIn。动画结束后调用。在您的回调中，您可以启动下一张图像的动画。