页面加载时实现双图无间隙交叉淡入的jQuery代码修改咨询

间隙产生的核心原因 #

当前切换时出现白色间隙，本质是两个问题导致的：

• 两张图片没有做层叠定位，在常规文档流中是上下占位的独立布局，而非完全重合叠放
• 现有jQuery采用串行回调的方式触发淡入动画，两张图片没有同步交叉过渡的过程，动画衔接间隙会露出容器的默认白色背景

具体调整操作 #

1. 补全CSS层叠规则 #

• 为#container1添加position: relative、overflow: hidden属性，作为内部元素层叠定位的参照，避免内容溢出
• 为.image1、.image2添加统一定位规则：position: absolute、top: 0、left: 0、width: 100%、height: 100%、vertical-align: bottom，让两张图片完全重合叠放，消除图片默认基线对齐带来的布局缝隙
• 初始状态将.image2设置为opacity: 0，不要使用display: none做初始隐藏，避免属性切换带来的布局重排闪白
• 为#wrapper（箭头元素）添加z-index: 10，保证箭头浮在图片上方不被遮挡

2. 替换原有串行的jQuery淡入逻辑 #

原有逻辑采用嵌套回调的方式串行触发淡入，会导致动画衔接出现空隙，需要改为同步交叉淡入逻辑，让两张图片的透明度变化同时启动、动画时长完全一致：

$("#container1").fadeIn("fast", function() {
  // 停止未完成的旧动画，避免重复触发时效果错乱
  $(".image2").stop().animate({opacity: 1}, "slow");
  $(".image1").stop().animate({opacity: 0}, "slow");
});

3. 清理冗余代码 #

删除原有嵌套回调中多余的.image1淡入逻辑——这段代码会在过渡完成后重新把image1的透明度切回1，完全打乱交叉淡入的最终效果。 #

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