如何用jQuery实现hover父元素时img的src切换淡入淡出动画？

嘿，这个需求我熟！既然你已经用jQuery实现了图片切换，想要加淡入淡出动画的话，我给你两个实用的方案，保证效果顺滑不卡顿～

方案一：单图片元素+预加载+jQuery淡入淡出动画 #

这个方案基于你现有的单img结构，通过预加载hover图、结合fade动画实现切换，改动量小：

HTML结构 #

我们用data-*属性存储hover状态的图片路径，方便后续维护：

<div class="img-container">
  <img src="img/1_thumb.jpg" alt="缩略图" data-hover-src="img/1_thumb_hov.jpg">
</div>

jQuery代码 #

$(document).ready(function() {
  // 预加载所有hover状态的图片，避免第一次hover时加载延迟
  $('.img-container img').each(function() {
    const hoverSrc = $(this).data('hover-src');
    if (hoverSrc) {
      $('<img>').attr('src', hoverSrc); // 把图片加载到浏览器缓存
    }
  });

  // 绑定hover事件
  $('.img-container').hover(
    // 鼠标移入：切换到hover图
    function() {
      const $img = $(this).find('img');
      // 先淡出原图，回调里替换src再淡入
      $img.fadeOut(200, function() {
        $img.attr('src', $img.data('hover-src')).fadeIn(200);
      });
    },
    // 鼠标移出：切回原图
    function() {
      const $img = $(this).find('img');
      // 第一次移入时把原图路径存到data属性里
      if (!$img.data('original-src')) {
        $img.data('original-src', $img.attr('src'));
      }
      // 同样用淡出-换src-淡入的逻辑
      $img.fadeOut(200, function() {
        $img.attr('src', $img.data('original-src')).fadeIn(200);
      });
    }
  );
});

注意：预加载图片这一步非常重要，能避免第一次hover时因为图片未加载完成导致的动画卡顿或闪烁。

方案二：双图片叠加（推荐，动画更流畅） #

这个方案用两张图片叠加在容器里，通过切换透明度实现淡入淡出，动画效果更顺滑，没有换src的等待时间：

HTML结构 #

把原图和hover图放在同一个容器里：

<div class="img-container">
  <img src="img/1_thumb.jpg" alt="缩略图" class="original-img">
  <img src="img/1_thumb_hov.jpg" alt="hover缩略图" class="hover-img">
</div>

CSS样式 #

让两张图片完全重叠，默认隐藏hover图：

.img-container {
  position: relative;
  /* 这里设置和你图片一致的宽高 */
  width: 200px;
  height: 200px;
}
.img-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保持图片比例，避免拉伸 */
}
.hover-img {
  opacity: 0; /* 默认隐藏hover图 */
}

jQuery代码 #

通过fadeTo方法切换两张图片的透明度，实现淡入淡出：

$(document).ready(function() {
  // 绑定hover事件
  $('.img-container').hover(
    function() {
      $(this).find('.hover-img').fadeTo(200, 1); // 淡入hover图
      $(this).find('.original-img').fadeTo(200, 0); // 淡出原图
    },
    function() {
      $(this).find('.hover-img').fadeTo(200, 0); // 淡出hover图
      $(this).find('.original-img').fadeTo(200, 1); // 淡入原图
    }
  );
});

进阶小技巧：如果不需要复杂的JS逻辑，甚至可以用纯CSS实现hover动画，完全不用JS：

.img-container:hover .hover-img {
  opacity: 1;
  transition: opacity 0.2s ease;
}
.img-container:hover .original-img {
  opacity: 0;
  transition: opacity 0.2s ease;
}

这个方案的优势在于动画完全没有延迟，因为两张图片一开始就加载完成了，只是切换显示状态，用户体验更好～

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