使用不带插件的jQuery延迟默认悬停操作

Question

我目前使用jQuery对导航菜单进行各种操作：

    jQuery("ul.menu").closest(".dropdown_fullwidth").add('ul.menu li').add('ul.nav-shop').mouseenter(function () {
    jQuery("#nav-blackout").css("display", "block");
})
    jQuery("ul.menu").mouseleave(function () {
    jQuery("#nav-blackout").css("display", "none");
});
    jQuery("ul.menu").mouseenter(function () {
    jQuery("ul.nav-shop li:nth-child(1)").addClass("is-active");
    jQuery("li.is-active a").next(".has-product-noms").addClass("display-product-noms");    
    if (jQuery(".display-product-noms")[0]){
    jQuery(".nav-banner").css("right", "0");
} else {
    jQuery(".nav-banner").css("right", "9999em");
}
})
    jQuery("ul.menu").mouseleave(function () {
    jQuery("ul.nav-shop li:nth-child(1)").addClass("is-active");
    jQuery("li.is-active a").next(".has-product-noms").addClass("display-product-noms");    
});
    jQuery("li.nav-shop-sub").mouseenter(function () {
    jQuery("li.nav-shop-sub .is-active").removeClass("is-active");
    jQuery(this).addClass("is-active");
    jQuery("li.is-active a").next(".has-product-noms").addClass("display-product-noms");
    if (jQuery(".display-product-noms")[0]){
    jQuery(".nav-banner").css("right", "0");
} else {
    jQuery(".nav-banner").css("right", "9999em");
}
    jQuery("#nav-blackout").css("display", "block");
})
    jQuery("li.nav-shop-sub").mouseleave(function () {
    jQuery("li.is-active a").next(".has-product-noms").removeClass("display-product-noms");
    jQuery(this).removeClass("is-active");
    jQuery("#nav-blackout").css("display", "none");
});

它可能不漂亮，但做了这项工作，然而我希望我的菜单（UL-LI）的最高级别在悬停时延迟。I.E当你把鼠标悬停在一个菜单项上，而不是css立即生效，下拉菜单出现时，我想把它延迟250毫秒左右，这样如果用户把鼠标移到相邻的菜单上，它就不会立即改变/变为活动状态。

我尝试过使用这个插件：https://github.com/john-terenzio/jQuery-Hover-Delay

然而，尽管我效仿了这个例子，但我似乎根本无法让它火起来。我不确定它是不能很好地处理其余的代码，还是不能正常工作（控制台中没有错误）。

有人有什么想法吗？我已经看了以前/类似的问题，但没有发现任何相关的问题。

Answer 1

这是fiddle

<https://jsfiddle.net/ef5cojqd/2/>

如果你有一些更好的选择，请编辑，以便每个人都能看到。