jQuery悬停切换图片src时淡入淡出过渡效果优化问题

嘿，我来帮你搞定这两个头疼的问题！咱们逐个击破：

你遇到的核心问题是没有等待原图片完全淡出就切换了src并触发淡入，导致两个动画重叠，看起来逻辑混乱。解决办法是利用jQuery动画的回调函数，让切换src和新图淡入的操作，只在原图片淡出完成后执行。

快速移入移出时事件重复执行，本质是动画队列堆积了多个未完成的操作。我们可以用stop(true, true)方法，在每次触发新动画前，清除之前未完成的动画队列，并让当前动画直接跳到结束状态，彻底避免重复执行。

完整修复代码示例 #

假设你的HTML结构是这样的（初始图片带有active类，默认显示）：

<!-- 要切换的图片 -->
<img class="image-switch active" src="initial-image.jpg" alt="初始图片">
<!-- 触发悬停的元素 -->
<div class="hover-target">悬停我切换图片</div>

对应的jQuery代码：

$(document).ready(function() {
  // 提前存储初始图片地址和要切换的目标图片地址
  const $image = $('.image-switch');
  const originalSrc = $image.attr('src');
  const hoverSrc = 'hover-image.jpg';

  $('.hover-target').hover(
    // 鼠标移入逻辑
    function() {
      // 先停止所有未完成的动画，清除队列，直接跳到当前动画结束
      $image.stop(true, true).fadeOut(300, function() {
        // 原图片完全淡出后，切换src并淡入新图片
        $(this).attr('src', hoverSrc).fadeIn(300);
      });
    },
    // 鼠标移出逻辑
    function() {
      $image.stop(true, true).fadeOut(300, function() {
        // 换回原图片地址并淡入
        $(this).attr('src', originalSrc).fadeIn(300);
      });
    }
  );
});

关键细节解释 #

• stop(true, true)：第一个true清除所有待执行的动画队列，第二个true让当前正在执行的动画直接完成，这样快速悬停时不会堆积一堆等待执行的淡入淡出操作。
• 回调函数的使用：fadeOut的第二个参数是回调函数，只有当淡出动画100%完成后，才会执行切换src和淡入的操作，完美实现“先淡出→换图→再淡入”的预期流程。
• 如果你的场景是多组图片切换，可以把目标src存在触发元素的data-*属性里（比如data-hover-src="xxx.jpg"），然后在jQuery里用$(this).data('hoverSrc')读取，代码会更灵活。

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