在开始下一个(fadeIn/fadeOut)之前完成函数

Question

更新（请参见底部说明）

我创建了一个图像映射，当你悬停在图像映射的特定区域时，网站的指定区域（侧边栏）会显示相应的描述。

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

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

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

以下是我的代码：

$(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.

---

更新：我尝试了大部分答案中提供的方法，虽然我相信这些答案是正确的方向，但我无法解决问题，但是我确实注意到了动画整体的改进。

最终，我使用了.stop(true,true);和**自动调整字体大小的组合。

**最终，没有获得期望的结果是由于我对jQuery的掌握不够娴熟，但是在赶时间的情况下，我设法找到了另一种处理此问题的方法（自动可调整字体）。

感谢所有抽出时间回答的人，对于那些寻找类似解决方案的人，至少知道.stop(true,true);属性确实对我解决了这个问题的一部分。

- Wordpressing

---

请查看这篇文章，它可能会对您有所帮助。 - Madara's Ghost

看这里以了解我是如何做到的：http://jsfiddle.net/MarkKramer/dGMzw/1/ 此外，你应该给我们提供一个 jsfiddle 来帮助你解决问题，这样其他人才能帮助你调试代码。 - Mark Kramer

Answer 1

尝试在每个fadeIn和fadeOut之前添加.stop。你应该将true, true传递给stop，以立即完成动画而不是让它半透明：

$("#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();
});

- Richard Dalton

Answer 2

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

- Sivakumar

---

好的建议，之前没有考虑过。 - Richard Dalton

Answer 3

尝试在每个.fadeIn和.fadeOut之前添加.stop（） - 这将取消任何先前的动画并立即开始新的动画。

您还有一个使用.hover()的问题 - 它实际上包含两个操作，mouseover和mouseout。当您分配两个函数给它时，第一个是mouseover，第二个是mouseout，但是当您只分配一个函数给它时，该函数同时用于mouseover和mouseout。 因此，实际上，您的代码导致元素在mouseout时既淡入又淡出。

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

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

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

- Blazemonger

Answer 4

尝试停止其他函数：

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

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

});

- Johnny Craig

Answer 5

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

- powtac

---

那跟什么有关系呢？他需要使用 .stop() 或者 .dequeue()。 - Madara's Ghost