JQuery悬停文本显图，切换悬停时如何跳过前图的隐藏延迟

该需求完全可以实现，不需要取消隐藏延迟配置，核心是利用jQuery的stop()方法清除待执行的动画队列即可解决多张图片堆叠的问题。

问题根源 #

1. 你当前使用的.delay()方法会将隐藏操作加入jQuery的默认动画队列，只要队列未被主动清空，即使切换了悬停目标，旧图片的隐藏任务仍会按原定延迟执行，导致多张图片同时显示。
2. 全局共享的imgID变量会在切换悬停目标时被覆盖，mouseout触发时无法正确定位到上一张需要隐藏的图片。

修正后代码 #

// 存储上一张已显示的图片对象
let lastActiveImg = null;

$("h2").mouseover(function () {
    // 直接终止上一张图片的所有待执行动画，立刻隐藏，跳过原有延迟
    if (lastActiveImg) {
        lastActiveImg.stop(true).hide();
    }

    let mouseText = $(this).attr("class").split(" ")[0];
    // 请根据你实际的ID规则调整选择器，示例默认补全了ID选择器前缀#
    let currentImg = $(`#${mouseText}`);
    currentImg.show();
    // 更新当前激活图片的引用
    lastActiveImg = currentImg;
});

$("h2").mouseout(function () {
    if (lastActiveImg) {
        lastActiveImg.delay(1000).hide(0);
    }
});

核心逻辑说明 #

stop(true)的作用是清空选中元素上所有未执行的动画队列，直接终止之前添加的延迟隐藏任务，再配合hide()就能让旧图片立刻隐藏，完全不会和新触发的图片显示产生冲突。

优化建议 #

你当前通过切割class属性获取图片标识的方式兼容性较差，后续如果给h2新增其他类名会导致逻辑失效。建议改为给h2添加自定义data-*属性存储对应图片ID：

<!-- HTML示例 -->
<h2 class="任意类名" data-target-img="wh-light">对应文本</h2>

JS中直接读取属性即可，无需切割class：

let mouseText = $(this).data('target-img');

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