jQuery hoverIntent 子菜单在从子菜单移动到主菜单时淡出答案

【问题标题】：jQuery hoverIntent submenu fades on move from submenu to main menujQuery hoverIntent 子菜单在从子菜单移动到主菜单时淡出
【发布时间】：2013-09-30 06:18:42
【问题描述】：

我尝试创建一个子菜单：

延迟 1 秒后再次隐藏以方便用户使用（意外失去焦点）
淡出，所以很明显
在重新进入时会停止淡入淡出并重新淡入

我介绍了hoverIntent的使用。

现在正在使用以下代码（jQuery的版本应该是最新的，否则fadeIn不起作用）：

$(document).ready(function(){

function showMenu() {
    $("#speciesSubmenu").stop(true,false).fadeIn(500).show();
}

function hideMenu() {
    $("#speciesSubmenu").fadeOut(1000,0);
}

$("#menuItemSoorten").hoverIntent({
    over: showMenu,
    timeout: 800,
    out: hideMenu
});

});

http://jsfiddle.net/johannesklapwijk/p8PDW/15/

【问题讨论】：

标签： javascript jquery hover settimeout

【解决方案1】：

一旦 mouseout 事件触发，设置的时间 Out 将运行并淡出。首先，您应该切换到对 mouseenter / mouseleave 事件使用 .on() 方法，并真正创建您想要使用此处提供的 hoverintent 插件之后的行为

https://github.com/briancherne/jquery-hoverIntent

【讨论】：

注意 .on 方法的改变只是一个最好的（更好的？）实践的事情，而不是必要的

【解决方案2】：

这里是解决方案：http://jsfiddle.net/p8PDW/6

方法中的处理程序中的停止导致问题

$("#speciesSubmenu").stop().css("opacity", "1").show();

这就是变化。对于 stop()，请阅读这篇文章 http://api.jquery.com/stop/ 它会对您有很大帮助

【讨论】：

我看不出有什么不同。它仍然表现得像原来的
这个解决方案还有一个问题：当你从子菜单悬停到主菜单时，它仍然会消失。
@JohannesKlapwijk 我重写了整个函数，如果现在应该可以工作：jsfiddle.net/p8PDW/15
将悬停事件更改为顶部菜单确实有效！有时解决方案比您想象的要容易得多。