添加延迟到jquery下拉菜单

Question

我试图添加延迟到一个简单的下拉菜单。用下面的代码，我得到一个延迟，但错误的类型。当我将鼠标快速移动到菜单上时，它会延迟它，但在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，或者这里的正确方法是什么?
提前致谢

Answer 1

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

without hover intent:

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

});

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

Answer 2

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

Answer 3

这篇文章包含示例代码和它的工作良好。

JQuery下拉菜单使用slideup和slidedown在悬停时是跳跃的

Answer 4

只用delay()

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

你说延迟以毫秒为单位，之后就是你的效果

Answer 5

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