使用jQuery实现链接悬停切换图片时跨链接平滑过渡问题咨询

问题根因 #

1. jQuery的hover()仅传入一个回调函数时，该函数会在mouseenter和mouseleave两个事件触发时都执行，搭配toggleClass会导致快速切换链接时，类的添加/删除逻辑错位，状态完全混乱
2. 未预加载悬停对应图片，每次切换时直接修改src，若图片未加载完成就触发过渡，会出现空白、跳闪问题
3. 父容器.home-intro-pic未设置相对定位，绝对定位的悬停图片定位基准异常，也可能引发视觉跳变

修复方案 #

第一步：补充CSS遗漏配置 #

原有CSS保持不变，新增父容器定位规则：

.home .legal-matter .home-intro-pic {
    position: relative;
    overflow: hidden; /* 可选，避免图片溢出容器 */
}

第二步：修改jQuery交互逻辑 #

拆分移入移出事件、预加载所有图片，避免状态混乱和加载延迟：

jQuery(function($) {
    // 页面加载完成后预加载所有悬停图片，消除切换时的加载等待
    const preloadImages = [];
    $("#practices-menu li a").each(function() {
        const imgUrl = $(this).data('image');
        if (imgUrl) {
            const img = new Image();
            img.src = imgUrl;
            preloadImages.push(img);
        }
    });

    // 明确拆分移入、移出逻辑，不使用toggleClass避免状态错位
    $("#practices-menu li a").hover(
        // 鼠标移入回调
        function() {
            const pa_img = $(this).data('image');
            const $hoverImg = $(".practice-area-img-hover");
            const $defaultImg = $(".practice-area-img");
            
            // 直接赋值图片地址（已预加载无延迟）
            $hoverImg.attr("src", pa_img);
            // 明确添加悬停类触发平滑过渡
            $hoverImg.addClass("hovered");
            $defaultImg.addClass("hovered");
        },
        // 鼠标移出回调
        function() {
            const $hoverImg = $(".practice-area-img-hover");
            const $defaultImg = $(".practice-area-img");
            
            // 明确移除悬停类触发切回默认图的过渡
            $hoverImg.removeClass("hovered");
            $defaultImg.removeClass("hovered");
            // 可选：过渡完成后清空悬停图片src节省内存
            setTimeout(() => {
                if (!$hoverImg.hasClass("hovered")) {
                    $hoverImg.attr("src", "");
                }
            }, 300); // 时长和CSS中transition的配置保持一致
        }
    );
});

极端场景优化（可选） #

如果需要应对1秒内切换3个以上链接的极端操作，可在移入赋值src前强制重排，彻底避免跳变：

// 移入回调中赋值src前添加以下代码
$hoverImg.css('opacity', 0).get(0).offsetHeight; // 强制重排让透明度修改即时生效
// 后续保持原有赋值src、加类的逻辑即可

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