为 jquery 下拉菜单添加延迟答案

【问题标题】：Adding delay to jquery drop down menu为 jquery 下拉菜单添加延迟
【发布时间】：2012-01-25 04:53:16
【问题描述】：

我正在尝试向一个简单的下拉菜单添加延迟。使用以下代码，我得到了延迟但类型错误。当我将鼠标快速移到菜单上时，它会延迟它，但在 300 毫秒后仍会打开它。正确的行为是在鼠标悬停 300 毫秒时打开菜单，离开菜单时也是如此。

$('#menu-item-1226:not(.parent-pageid-1225 #menu-item-1226)').hover(function(){
    var menu = this;
    setTimeout(function(){
        $(menu).find('ul').slideToggle(100);
    }, 300);
});

我是否必须以某种方式stop 它或者这里的正确方法是什么？
提前致谢

【问题讨论】：

标签： jquery timeout delay drop-down-menu

【解决方案1】：

这可能是您正在寻找的，但是使用 Jquery 插件 HoverIntent 也可以，甚至更好。

没有悬停意图：

$(function() {
        var timer;
    $('#Header li').hover(function(){
                if(timer) {
                        clearTimeout(timer);
                        timer = null
                }
                timer = setTimeout(function() {
                           $(this).find('ul').slideToggle(100);
                }, 500)
    },
    // mouse out
    });

});

hover intent plugin

$("#Header li").hoverIntent({
    sensitivity: 7, // number = sensitivity threshold (must be 1 or higher)
    interval: 50,   // number = milliseconds of polling interval
    over: function () {
        $('ul', this).slideDown(220);
    },  // function = onMouseOver callback (required)
    timeout: 0,   // number = milliseconds delay before onMouseOut function call
    out: function () {
        $('ul', this).hide();
    }    // function = onMouseOut callback (required)
});

【讨论】：

谢谢！但不知何故我无法让它工作......这是一段工作代码还是我需要以某种方式调整它？
对不起，我还没有测试过。然而，这是做到这一点的方法。我根据您的需要对其进行了一些调整，这可能是我出错的地方。
我正在处理它，我会尽快将正确的语法发布给您。

【解决方案2】：

查看这个插件：http://cherne.net/brian/resources/jquery.hoverIntent.html :)

【讨论】：

【解决方案3】：

这篇文章包含示例小提琴代码及其工作正常。

JQuery dropdown menu using slideup and slidedown on hover is jumpy

【讨论】：

【解决方案4】：

只需使用delay()

$(menu).find('ul').delay(300).slideToggle(100);

你说延迟毫秒，之后就是你的效果。

【讨论】：

这将产生与上述相同的效果，当您快速移动鼠标时，它仍然会打开菜单。
您在错误的解决方案中发布了它。我的帖子在他之前；）

【解决方案5】：

$(menu).find('ul').delay(300).slideToggle(100);

【讨论】：

这仍然会导致菜单显示，只是延迟 300 毫秒。