javascript - 在开始下一步之前完成功能(淡入/淡出)

Question

更新(见底部注释)

我创建了一个图像映射，当您将鼠标悬停在该图像映射的特定部分上时，描述将出现在我网站的指定区域(侧边栏)。

每个描述都有不同的长度，因此我没有为我的侧边栏区域设置任何最大高度级别，以便显示可以垂直增长以容纳每个描述。

我遇到的问题是，当您快速将鼠标悬停在图像 map 的区域上时，显示会产生一些奇怪的结果；在新悬停的区域和相应的描述下方完整显示来自另一个热点的内容一秒钟(希望有意义)

有没有办法在显示下一个功能之前完整地完成一个功能以避免这种讨厌的显示/动画？

这是我的代码:

$(document).ready(function() {
    $("#a-hover").hide();
    $("#a").hover(function() {
        $("#a-hover").fadeIn();
    }).mouseleave(function() {
        $("#a-hover").fadeOut();
    });

    $("#b-hover").hide();
    $("#b").hover(function() {
        $("#b-hover").fadeIn();
    }).mouseleave(function() {
        $("#b-hover").fadeOut();
    }); 

    $("#c-hover").hide();
    $("#c").hover(function() {
        $("#c-hover").fadeIn();
    }).mouseleave(function() {
        $("#c-hover").fadeOut();
    }); 

还有我的 CSS；

#a-hover,#b-hover,#c-hover {
    z-index: 2;
    float: left;
    position: relative;
}

#a-hover,#b-hover,#c-hover,{
    position: relative;
    top: 0px;
    left: 0px;
    z-index: 1;
    width:326px;
    min-height:603px;
    background-color:#dedddd;
}

• 为了可读性，我缩短了代码(我有 9 个图像映射热点)
• 我是 jQuery 的新手，但我正在努力学习，所以请放轻松，因为我的代码可能达不到标准!
• 在发帖之前，我已经尝试自己解决这个问题，但我力不从心，需要一些专家建议

感谢任何回复。

谢谢你，

Wp.

---

UPDTAE:我尝试了此处提供的大部分内容作为答案，虽然我相信这些答案是正确的，但我无法让问题停止，但我确实注意到整体动画有所改进。

我最终使用了组合 .stop(true,true);和 ** resize font automatically .

**最终没有得到想要的结果是因为我对 jQuery 缺乏润色，但由于匆忙，我设法找到了另一种方法来处理这个问题(自动调整字体大小)。****

感谢所有花时间回答的人，感谢那些阅读本文以寻求类似解决方案的人至少知道 .stop(true,true);事实上，属性确实帮我解决了这个问题的一部分。

Answer 1

尝试添加 .stop在每个 fadeIn 和 fadeOut 之前。你应该传递 true, true 来停止以立即完成动画而不是让它半淡入:

$("#a").hover(function() {
    $("#a-hover").stop(true, true).fadeIn();
}).mouseleave(function() {
    $("#a-hover").stop(true, true).fadeOut();
});

您还可以通过绑定(bind)类而不是 id 来摆脱所有重复:

$(".imageMapElement").hover(function() {
    $("#" + $(this).attr("id") + "-hover").stop(true, true).fadeIn();
}).mouseleave(function() {
    $("#" + $(this).attr("id") + "-hover").stop(true, true).fadeOut();
});