如何用jQuery实现图片间的平滑过渡切换而非突变效果？

当然可以实现一张图片淡入的同时另一张淡出的交叉过渡效果！核心思路是让两张图片重叠放置在同一个容器中，然后同时对它们的透明度执行动画，替代原来直接替换src的方式。下面是针对你现有代码的完整改造方案：

方案一：动态创建图片元素（适合任意数量图片） #

这种方式每次切换时创建新的图片元素，完成过渡后移除旧元素，逻辑清晰且灵活。

修改后的HTML结构 #

我们需要给图片添加一个容器，用来控制图片的叠加布局：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn1 active"> Button 1 </button>
<button class="btn btn2 inactive"> Button 2 </button>
<button class="btn btn3 inactive"> Button 3 </button>
<br>
<br>
<div id="image-container">
  <img src="https://dummyimage.com/300x300/000/fff&text=Image+1" class="active-image">
</div>

调整CSS样式 #

设置容器为相对定位，图片绝对定位以实现重叠，同时定义初始的透明度状态：

.active{background:green;}
.inactive{background:grey;}

#image-container {
  position: relative;
  width: 300px;
  height: 300px;
}

#image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.active-image {
  opacity: 1;
}

.inactive-image {
  opacity: 0;
}

重写JavaScript逻辑 #

不再直接替换src，而是创建新图片并执行交叉动画：

var images = ["https://dummyimage.com/300x300/000/fff&text=Image+1", "https://dummyimage.com/300x300/000/fff&text=Image+2", "https://dummyimage.com/300x300/000/fff&text=Image+3"];

$('.btn').click(function(){
    // 保持原有的按钮状态切换逻辑
    $('.btn').removeClass('active').addClass('inactive');
    $(this).removeClass('inactive').addClass('active');

    // 获取当前按钮对应的图片索引
    var targetIndex = $(this).index('.btn');
    var targetSrc = images[targetIndex];

    var container = $('#image-container');
    var currentActiveImg = container.find('.active-image');

    // 如果当前显示的就是目标图片，直接返回避免重复操作
    if (currentActiveImg.attr('src') === targetSrc) return;

    // 创建新的图片元素，初始为透明状态
    var newImg = $('<img>', {
      src: targetSrc,
      class: 'inactive-image'
    });

    // 将新图片添加到容器中（此时它在旧图片下方，透明不可见）
    container.append(newImg);

    // 执行交叉过渡动画：旧图片淡出，新图片淡入
    currentActiveImg.animate({ opacity: 0 }, 500, function() {
        // 旧图片动画结束后移除，节省DOM资源
        $(this).remove();
    });

    newImg.animate({ opacity: 1 }, 500, function() {
        // 新图片动画结束后标记为活跃状态
        $(this).removeClass('inactive-image').addClass('active-image');
    });
});

方案二：固定双图片元素（性能更优） #

如果你的图片数量固定，也可以用两个固定的图片元素交替切换，减少DOM操作：

HTML结构 #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn1 active"> Button 1 </button>
<button class="btn btn2 inactive"> Button 2 </button>
<button class="btn btn3 inactive"> Button 3 </button>
<br>
<br>
<div id="image-container">
  <img src="https://dummyimage.com/300x300/000/fff&text=Image+1" class="image-top">
  <img src="" class="image-bottom">
</div>

CSS样式 #

.active{background:green;}
.inactive{background:grey;}

#image-container {
  position: relative;
  width: 300px;
  height: 300px;
}

#image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.image-top {
  z-index: 1;
  opacity: 1;
}

.image-bottom {
  z-index: 0;
  opacity: 0;
}

JavaScript逻辑 #

var images = ["https://dummyimage.com/300x300/000/fff&text=Image+1", "https://dummyimage.com/300x300/000/fff&text=Image+2", "https://dummyimage.com/300x300/000/fff&text=Image+3"];
var currentIndex = 0;

$('.btn').click(function(){
    $('.btn').removeClass('active').addClass('inactive');
    $(this).removeClass('inactive').addClass('active');

    var targetIndex = $(this).index('.btn');
    if (targetIndex === currentIndex) return;

    var container = $('#image-container');
    var topImg = container.find('.image-top');
    var bottomImg = container.find('.image-bottom');

    // 设置底部图片的源为目标图片
    bottomImg.attr('src', images[targetIndex]);

    // 同时执行动画：底部图片淡入，顶部图片淡出
    bottomImg.animate({ opacity: 1 }, 500);
    topImg.animate({ opacity: 0 }, 500, function() {
        // 动画结束后交换两张图片的层级和状态，为下一次切换做准备
        topImg.attr('src', images[targetIndex]).removeClass('image-top').addClass('image-bottom').css('opacity', 0);
        bottomImg.removeClass('image-bottom').addClass('image-top').css('opacity', 1);
        currentIndex = targetIndex;
    });
});

两种方案都能实现你想要的“一张淡入同时另一张淡出”的平滑过渡效果，你可以根据自己的需求选择其中一种。

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