在开始下一步之前完成功能（淡入/淡出）答案

【问题标题】：Complete function before starting next (fadeIn/fadeOut)在开始下一步之前完成功能（淡入/淡出）
【发布时间】：2011-11-28 13:07:29
【问题描述】：

已更新（见底部注释）

我创建了一张图片地图，当您将鼠标悬停在该图片地图的特定部分上时，说明将出现在我网站的指定区域（侧边栏）中。

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

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

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

这是我的代码：

$(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);事实上，属性确实为我解决了这个问题的一部分。

【问题讨论】：

见this 文章。它可能会对你有所帮助。
看这里看看我是怎么做到的：jsfiddle.net/MarkKramer/dGMzw/1 另外，你应该给我们一个 jsfiddle 来帮助你解决问题，其他人可以通过什么方式帮助你处理代码

标签： javascript jquery

【解决方案1】：

尝试在每个 .fadeIn 和 .fadeOut 之前添加 .stop() -- 这将取消之前的所有动画并立即开始新的动画。

你在使用.hover() 时也遇到了问题——它实际上封装了两个动作，鼠标悬停和鼠标移出。当您为其分配两个函数时，第一个是 mouseover，第二个是 mouseout，但是当您只为其分配一个函数时，该函数同时用于 mouseover 和 mouseout。 所以，实际上，您的代码导致元素在鼠标移出时淡入和淡出。

顺便说一句，您可以使用标准的 jQuery 技术大大缩短您的代码：

$("#a-hover,#b-hover,#c-hover").hide().hover(function() {
    $(this).stop().fadeIn();
}, function() {
    $(this).stop().fadeOut();
});

...或者更好的是，为这三个 ID 中的每一个分配一个类并选择它。

【讨论】：

【解决方案2】：

也许你可以试试Jquery Hover Intent插件。

【讨论】：

好推荐，没考虑过。

【解决方案3】：

尝试在每个淡入和淡出之前添加.stop。您应该通过true, true 停止以立即完成动画，而不是让它半淡入：

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

您还可以通过绑定类而不是 id 来消除所有重复：

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

【讨论】：

【解决方案4】：

尝试停止其他功能：

 $("#a").hover(function() {
    $("#b-hover").stop().hide();
    $("#c-hover").stop().hide();
    $("#a-hover").fadeIn();

}).mouseleave(function() {
    $("#a-hover").fadeOut();

});

【讨论】：

【解决方案5】：

你必须链接所有的 jQuery 函数调用！

【讨论】：

这和什么有什么关系？他需要使用.stop() 或.dequeue()。