jquery一张一张显示图片

Question

这可能是几个问题在这里合并在一起，我正在创建一个图片库，并希望缩略图在页面上一个接一个地淡入，这需要对 div 中的图像数量是动态的（对于在其他图库页面上重复使用）

$(function {
var $gallImages = $('#galleryThumbs img');


for(i=0; i<=$gallImages.length; i++){
    $(document.getElementById('galleryThumbs').getElementsByTagName('img')[i]).addClass('done').fadeIn('slow');

}});

这会在加载时同时显示所有图像：(

还有更好的方法在 jQuery 中进行元素收集我找不到任何关于使用图像标签所需的数组的信息

对此的任何帮助将不胜感激，我在这方面遇到了心理障碍

Answer 1

您可以为每个人添加一个.delay()，如下所示：

$(function {
  $('#galleryThumbs img').each(function(i) {
    $(this).delay(i*600).fadeIn('slow')
  });
});

我不确定什么时候应该添加您的课程，您可以立即添加或 .queue() 它，这取决于它是否应该在淡入淡出之前发生。这会立即淡入第一个，600 毫秒后第二个淡入淡出（当第一个淡入淡出完成时），之后的下一个，等等。如果您想要重叠，只需低于 600（这就是 'slow'）。

要立即添加类，一个一个淡入淡出：

$('#galleryThumbs img').addClass('done').each(function(i) {
  $(this).delay(i*600).fadeIn('slow')
});

或者，在褪色之前添加它：

$('#galleryThumbs img').each(function(i) {
  $(this).delay(i*600).queue(function(n) { $(this).addClass('done'); n(); })
                      .fadeIn('slow')
});