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

}）;

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 dropdown menu using slideup and slidedown on hover is jumpy

Answer 4

只需使用delay()

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

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

Answer 5

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

向jquery下拉菜单添加延迟

5 个答案: