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

时间:2016-01-09 11:12:52

标签: jquery hover delay

我目前使用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)的顶级在悬停时会延迟。 IE当你将鼠标悬停在一个菜单项而非css立即生效并显示下拉列表时,我想将它延迟大约250ms,这样如果用户将鼠标移到相邻的菜单上,它就不会立即更改/变得活跃。

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

然而,尽管遵循这个例子我似乎根本无法解雇它。无论是与其他代码完美搭配还是不能正常工作,我都不确定(控制台中没有错误)。

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

1 个答案:

答案 0 :(得分:0)

这是小提琴

// example 1
platform.os; // 'Windows Server 2008 R2 / 7 x64'

// example 2 on an iPad
platform.os; // 'iOS 5.0'

// you can also access on the browser and some other properties
platform.name; // 'Safari'
platform.version; // '5.1'
platform.product; // 'iPad'
platform.manufacturer; // 'Apple'
platform.layout; // 'WebKit'

// or use the description to put all together
platform.description; // 'Safari 5.1 on Apple iPad (iOS 5.0)'

如果您有更好的选择,请编辑以便所有人都能看到。