javascript - 顶级/子级菜单上的隐藏()延迟问题但是当鼠标再次进入时取消隐藏()

Question

我在菜单中遇到 onmouseout/over delay 问题。我发现通过将 setTimeout 数字从 100 更改为 2000，它延迟了顶层菜单的隐藏而不是子级菜单，并且在新的 onmouseover 上它们仍然隐藏，这就是我想要完成的:

在主菜单或主菜单和二级菜单的 onmouseout 上，延迟隐藏 2-3 秒，但如果用户返回 onmouseover 任一元素，它将取消延迟并继续显示它们。

我在网上找到的大多数帮助只是为了隐藏延迟，而不是在新的 onmouseover 上取消它。

这是我的代码: http://jsfiddle.net/MQ2cg/4/

jQuery.fn.hoverWithDelay = function (inCallback, outCallback, delay) {
    this.each(function (i, el) {
        var timer;
        $(this).hover(function () {
            timer = setTimeout(function () {
                timer = null;
                inCallback.call(el);
            }, delay);
        }, function () {
            if (timer) {
                clearTimeout(timer);
                timer = null;
            } else outCallback.call(el);
        });
    });
};
$(document).ready(function () {
    var hovering = {
        mainMenu: false,
        categories: false
    };

    function closeSubMenus() {
        $('ul.sub-level').css('display', 'none');
    }
    closeSubMenus();

    function closeMenuIfOut() {
        setTimeout(function () {
            if (!hovering.mainMenu && !hovering.categories) {
                $('#navigation').fadeOut('fast', closeSubMenus);
            }
        }, 100);
    }
    $('ul.top-level li').hover(function () {
        $(this).find('ul').show();
    }, function () {
        $(this).find('ul').hide();
        closeMenuIfOut();
    }, 100);
    $('#categories').hoverWithDelay(function () {
        $('#navigation').show();
        hovering.categories = true;
    },

    function () {
        hovering.categories = false;
        closeMenuIfOut();
    }, 175);
    $('#navigation').hover(function () {
        hovering.mainMenu = true;
    }, function () {
        hovering.mainMenu = false;
    });
    $('#categories').click(function () {
        window.location.href = $('a', this).attr('href');
    });
});

感谢您的帮助。

Answer 1

这个问题似乎很相似:

JS for mouseover image upload button (like Facebook)

正如 Amin Eshaq 指出的那样使用 mouseenter/mouseleave

这里是工作代码:

    $(this).bind({
            'mouseenter' : function () {
                    timer = setTimeout(function () {
                            timer = null;
                            inCallback.call(el);
                    }, delay);
            },
            'mouseleave' : function () {
                    if (timer) {
                            clearTimeout(timer);
                            timer = null;
                    } else outCallback.call(el);
            }            
    });