在开始下一个(fadeIn/fadeOut）之前完成功能

Complete function before starting next (fadeIn/fadeOut)

本文关键字：成功 功能 fadeOut 下一个 开始 fadeIn      更新时间：2023-09-26

更新(见底部注释(

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

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

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

在显示下一个功能之前，是否需要完整地完成一个功能，以避免这种令人讨厌的显示/动画？

这是我的代码：

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

尝试在每个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();
});

您可以尝试Jquery Hover Intent插件。

尝试停止其他功能：

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

尝试在每个.fadeIn和.fadeOut之前添加.stop()——这将取消以前的任何动画，并立即开始新的动画。

使用.hover()也有问题——它实际上封装了两个操作，mouseover和mouseout。当你给它分配两个函数时，第一个是mouseover，第二个是mouse out，但当你只给它分配一个函数时时，这一个函数用于mouseover和mouseout因此，实际上，您的代码导致元素在mouseout上fadeIn和fadeOut。

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

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

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

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

相关文章：