如何逐个淡入图像？

Question

我见过使用chaining settimeout执行此操作的示例。然而，这对无限数量的图像不起作用。 调用多个图像的.each函数会导致它们同时淡入。有没有像.each这样的函数可用于循环而在执行中阻塞？

Answer 1

您可以使用jQuery delay方法：

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

Answer 2

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

Answer 3

  

“是否有像.each这样的函数可用于循环   阻止执行？“

没有

  

“我已经看过使用链接settimeout执行此操作的示例。但是   无法用于无限数量的图像。“

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

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

Answer 4

function fadeInComplete(i,$imgs)
{

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

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