Question

我目前正在使用jQuery Hover Intent插件在触发菜单悬停时添加初始延迟。

HTML：

<div>
    <ul>
        <li class="link hover"><a href="#">Hover</a></li>
    </ul>
</div>

<div class="sub hover">
     <h1>Sub Section</h1>
</div>

JS：

// Vars
var timeout;

// Show Menu
function showMenu() {
    clearTimeout(timeout);
    $('.sub').fadeIn(50);
}

// Hide Menu
function hideMenu() {
    timeout = setTimeout(function () {
        $('.sub').fadeOut(50);
    }, 100);
}

// Settings
var config = {
    interval: 50, // time between reading/comparing mouse coordinates
    timeout: timeout, // time before out function is called
    over: showMenu,
    out: hideMenu
};

// Initialise Hover
$('.hover').hoverIntent(config);

在配置中，当间隔设置为0时，容器之间的切换工作正常。

当我设置大于0的间隔时，容器内外的徘徊变得越来越多（子菜单闪烁并消失）。但是我需要为初始延迟设置间隔。

JS小提琴：http://jsfiddle.net/hfx7ucnw/4/

Answer 1

编辑 - 新答案

好的伙计。如果你有这个html并且每次触发.stop(true)或fadeOut以阻止mouseenter时你都无法改变over fadeOut动画。

我不知道这是否适用于hoverIntent插件，但您可以使用此代码：

$(".hover").on({
    "mouseenter" : function(e){
        $(".sub").stop(true);
        $(".sub").fadeIn();
    },
    "mouseleave" : function(e){
        $(".sub").delay(50).fadeOut();
    },
})

编辑＃2 - 意外地预防

为防止意外过度简单，如果用户“超过”.hover按钮，则会对fadeIn效果添加延迟（但不会超过.sub）。

同样在mouseleave添加.stop(true)以防止淡入淡出“快速移动”：

$(".hover,.sub").on({
    "mouseenter" : function(e){
        _delay = ($(this).hasClass("hover")) ? 200 : 0 ;
        $(".sub").stop(true);
        $(".sub").delay(_delay).fadeIn();
    },
    "mouseleave" : function(e){
        $(".sub").stop(true);
        $(".sub").delay(50).fadeOut();
    },
})

使用延迟和淡入淡出来创造最佳性能。

示例：http://jsfiddle.net/hfx7ucnw/8/

旧答案

这是我所知道的问题。

根据我的经验，我可以告诉您，创建“{1}}上显示的”下拉列表“或”子菜单“并隐藏mouseover的唯一方法是缩进子元素致父母我编辑你的小提琴向你展示我的方式。

对mouseleave和CSS

进行了一些简单的更改

http://jsfiddle.net/hfx7ucnw/5/

告诉我这种方式是否适合你。

Answer 2

实际上它不会像你想象的那样工作。你把同一个课程给了菜单和子菜单＆＃39; hover＆＃39;在jQuery中你写了$（＆＃39; .hover＆＃39;）。hoverIntent（config）;此行将在Menu和Submenu元素上初始化hoverIntent。因此，当您使用0作为间隔时，一切正常，因为HoverIntent的showMenu和hideMenu回调与两个元素一起附加。

所以最后，你必须编写自己的代码/逻辑来防止SubMenu隐藏。

jQuery Hover Intent，当interval大于0时，子菜单消失/ bug

2 个答案:

编辑 - 新答案

编辑＃2 - 意外地预防

旧答案