javascript - 下拉菜单上的 jquery 超时（hoverintent）

Question

$(document).ready(function () { 

$('#nav li').hover(
    function () {
        //show its submenu
        $('ul', this).slideDown(220);

    }, 
    function () {
        //hide its submenu
        $('ul', this).slideUp(220);         
    }
);

你好，我想在我的下拉菜单上设置一个“延迟”，因为响应时间太快了。当我不小心连续悬停 4 次时（它一直上下滑动）。我阅读并尝试了 HoverIntent jquery 插件。但我无法用这个简单的 jquery 菜单来实现它。

有没有人有这样的经历？我真的很感激，我尝试实现它但没有成功（我不擅长 jquery）。请提供一些提示/代码，谢谢！

Answer 1

您必须停止当前正在运行的动画。尝试这个，

$('#nav li').hover(
    function () {
        //show its submenu
        $('ul', this).stop().slideDown(220);

    }, 
    function () {
        //hide its submenu
        $('ul', this).stop().slideUp(220);         
    }
);

Answer 2

尝试以下操作以防止多次触发悬停功能。

$('#nav li').hover(
    function () {
        //show its submenu
        $('ul', this).stop().slideDown(220);

    }, 
    function () {
        //hide its submenu
        $('ul', this).stop().slideUp(220);         
    }
);