向jquery下拉菜单添加延迟

Question

我试图将延迟添加到一个简单的下拉菜单中。使用以下代码，我得到了延迟，但种类错误。当我非常快地将鼠标移到菜单上时，它会延迟它，但在300ms之后仍会打开它。正确的做法是，当鼠标悬停在菜单上300ms时（与离开菜单时一样）打开菜单。

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

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

Answer 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
    });

}）;

带有悬浮意图插件

$("#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)
});