堆叠图片依次淡入动画同时触发而非逐次执行的问题求助

你的代码存在两个核心问题，导致图片出现同时淡入的现象，下面逐一说明并给出修正方案：

问题分析 #

1. ID匹配错误：带.stacked类的图片ID为stacked8到stacked1（共8张），但循环里i从0到7，实际操作的是stacked0到stacked7——其中stacked0未添加.stacked类（默认可见），而最上层的stacked8完全没被处理。
2. 定时器间隔过小：动画时长为1000ms，但定时器间隔仅为100*i，第2张图片会在第1张开始淡入100ms后就启动动画，视觉上几乎同步，自然看起来是一起淡入。

修正方案 #

方案1：修复循环逻辑+调整定时器间隔 #

先修正ID遍历范围，把间隔调整为与动画时长匹配（或稍短，实现衔接效果）：

function doLoop() {
    // 遍历stacked8到stacked1，共8张目标图片
    for (var i = 8; i >= 1; i--) {
        (function(i) {
            // 间隔设为1000ms，确保上一张淡入完成后下一张开始
            setTimeout(function() { 
                $('#stacked' + i).animate({'opacity': '1'}, 1000); 
            }, 1000 * (8 - i));
         })(i);
    }
}

1000 * (8 - i)的作用是：i=8时延迟0ms（立即开始），i=7延迟1000ms，以此类推，严格实现依次淡入。如果想要稍微重叠的衔接效果，可把间隔改成800ms。

方案2：用jQuery的delay()方法更优雅实现 #

jQuery的delay()方法可直接为队列中的动画设置延迟，无需手动写闭包和setTimeout，代码更简洁：

function doLoop() {
    // 按HTML顺序选取图片（从最下层到最上层）
    $('.stacked').each(function(index) {
        $(this).delay(1000 * index).animate({'opacity': 1}, 1000);
    });
}

若想从最上层的stacked8开始淡入，可反转选取顺序：

$('.stacked').get().reverse().each(function(index) {
    $(this).delay(1000 * index).animate({'opacity': 1}, 1000);
});

额外优化建议 #

• 如果希望滚动到上方时图片依次淡出，可在direction == 'up'分支里写反向逻辑，将opacity设为0并调整延迟顺序。
• 可为.stacked图片添加z-index明确层级，避免浏览器默认顺序带来的意外：

.img-container .stacked {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
}
#stacked1 { z-index: 1; }
#stacked2 { z-index: 2; }
#stacked3 { z-index: 3; }
#stacked4 { z-index: 4; }
#stacked5 { z-index: 5; }
#stacked6 { z-index: 6; }
#stacked7 { z-index: 7; }
#stacked8 { z-index: 8; }

内容的提问来源于stack exchange，提问作者LauraNMS