使用JQuery实现图片切换的过渡效果（添加/移除类）

问题说明 #

需要实现鼠标悬停/移出.product-box容器时，切换.image-main和.image-hover两张图片的淡入淡出过渡效果。当前切换功能正常，但缺少过渡动画，要求用JS实现（后续需添加额外操作，且CSS hover会破坏.img-fluid功能）。

修改后的代码实现 #

HTML（无需改动） #

<div class="col-6">
  <div class="product-box">
    <div class="product-box__image">
      <img class="img-fluid image-main" src="https://dummyimage.com/400x200/000/fff">
      <img class="img-fluid image-hover" src="https://dummyimage.com/400x200/00cc00/fff">
    </div>
    <div class="product-box__content">
      <p class="text-center p-3">
        hello description<br>on hover - change image too
      </p>
    </div>
  </div>
</div>

CSS（调整定位与透明度，支持过渡） #

.product-box {
  border: 1px solid gray;
}

.product-box__image {
  position: relative; /* 让内部图片基于父容器定位 */
  padding-top: 50%; /* 保持图片比例，适配响应式 */
}

.product-box__image img {
  position: absolute; /* 两张图片重叠显示 */
  top: 0;
  left: 0;
  width: 100%; /* 继承父容器宽度，保留img-fluid响应式特性 */
  height: 100%;
  object-fit: cover;
}

.image-main {
  opacity: 1;
  transition: opacity 0.3s ease; /* 定义过渡动画时长与曲线 */
}

.image-hover {
  opacity: 0;
  transition: opacity 0.3s ease;
}

JS（用动画方法实现淡入淡出，保留扩展空间） #

$('.product-box').hover(
  function() {
    // 鼠标移入：主图淡出，hover图淡入
    $(this).find('.image-main').animate({opacity: 0}, 300);
    $(this).find('.image-hover').animate({opacity: 1}, 300);
    // 后续可在此添加额外操作，比如更新产品数据、触发交互事件等
  },
  function() {
    // 鼠标移出：hover图淡出，主图淡入
    $(this).find('.image-hover').animate({opacity: 0}, 300);
    $(this).find('.image-main').animate({opacity: 1}, 300);
    // 后续可在此添加额外操作
  }
);

关键改动说明 #

• CSS层面：用opacity替代display:none实现显隐（display无法触发过渡动画），通过绝对定位让两张图片重叠，同时保留.img-fluid的响应式适配能力
• JS层面：使用animate()方法控制透明度变化实现淡入淡出，无需切换类名，逻辑更直观，且预留了后续添加额外操作的空间

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