基于setInterval实现图片切换的fadeIn/fadeOut过渡效果问题

我猜你之前的写法应该是直接在setInterval里同步执行清空和插入操作，这样动画还没来得及完成就被新的DOM操作覆盖了，自然看不到平滑过渡效果。要实现淡入淡出的切换，得严格遵循「淡出旧内容 → 替换内容 → 淡入新内容」的顺序，而且必须等前一个动画完成后再执行下一步。

下面是修正后的完整代码，我拆成了几个函数让逻辑更清晰：

HTML结构（假设你是这样的） #

<div id="image-container"></div>

jQuery代码 #

// 页面加载完成后先初始化第一张图片
$(document).ready(function() {
  loadRandomImage();
  
  // 每6秒触发一次图片切换
  setInterval(switchImage, 6000);
});

// 加载Unsplash随机图片的函数
function loadRandomImage() {
  // 生成适配当前窗口尺寸的随机图片链接
  const imgUrl = `https://source.unsplash.com/random/${window.innerWidth}x${window.innerHeight}`;
  const imgElement = $('<img>').attr('src', imgUrl);
  
  // 加load事件监听，避免图片没加载完就淡入出现空白
  imgElement.on('load', function() {
    $('#image-container').append($(this));
  });
}

// 带过渡动画的图片切换函数
function switchImage() {
  const container = $('#image-container');
  
  // 先淡出容器，动画时长500ms，完成后执行回调里的操作
  container.fadeOut(500, function() {
    // 清空旧图片
    $(this).empty();
    // 加载新图片
    loadRandomImage();
    // 淡入新内容
    $(this).fadeIn(500);
  });
}

关键要点说明 #

• 利用动画回调控制流程：jQuery的fadeOut和fadeIn都支持传入回调函数，这个函数会在动画完全结束后执行，这样就能保证切换顺序不会乱。
• 拆分功能函数：把加载图片和切换逻辑分开，不仅代码更好维护，也方便后续扩展（比如加加载状态、错误处理）。
• 图片加载优化：保留img的load事件监听，可以避免图片还没加载完就淡入，导致出现短暂空白的问题。

这样修改后，就能看到每6秒图片平滑淡出，然后新图片淡入的效果啦～

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