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的。

UPDTAE：我尝试了这里提供的大部分内容作为答案，虽然我相信这些答案都在正确的轨道上但我无法解决问题，但我确实注意到整体动画的改进。 /强>

我最终使用了一个组合.stop（true，true）;和** resize font automatically 。

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

感谢所有花时间回答的人，并且对于那些阅读此类问题的人来说至少知道.stop（true，true）;事实上，我确实可以解决这个问题的一部分。

Answer 1

尝试在每个fadeIn和fadeOut之前添加.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();
});

Answer 2

可以试试Jquery Hover Intent插件。

Answer 3

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

使用.hover()时也遇到问题 - 它实际上封装了两个动作：mouseover和mouseout。当你为它分配两个函数时，第一个是mouseover，第二个是mouseout，但是当你只为它分配一个函数时，一个函数用于mouseover和mouseout。所以，实际上，你的代码导致元素在mouseout上淡出和 fadeOut。

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

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

......甚至更好的是，为这三个ID中的每一个分配一个类，然后选择它。

Answer 4

尝试停止其他功能：

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

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

});

Answer 5

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

下次开始前完成功能（fadeIn / fadeOut）

5 个答案: