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')
  });
});

我不确定什么时候应该添加你的类(class)，你可以立即添加或 .queue()它，取决于它是否应该在褪色之前发生。第一个立即淡出，第二个 600 毫秒后(当第一个淡入结束时)，之后下一个淡出，依此类推。如果您想要重叠，只需低于 600(这就是 的慢速效果) ' 是)。

要立即添加类，请逐一淡入淡出:

$('#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')
});