我正在尝试在下拉菜单的悬停效果期间实现时间延迟。我正在尝试使用 setTimeout,并且下拉菜单在悬停时可以正常工作,但我没有得到延迟。它只是瞬间发生的。下面是我的代码:
$(document).ready(function(){
$("li.dropdown-hover").hover(hoverIn, hoverOut);
});
function hoverIn(){
setTimeout(func1(this), 3000);
}
function hoverOut(){
setTimeout(func2(this), 1000);
}
function func1(element) {
$(element).find(".dropdown-menu-hover").css("display", "block");
}
function func2(element) {
$(element).find(".dropdown-menu-hover").css("display", "none");
}
我对jQuery很陌生,出于某种原因,我不希望使用任何外部插件,例如许多类似问题中建议的 http://cherne.net/brian/resources/jquery.hoverIntent.html 插件。有人可以告诉我这里出了什么问题吗?
当你编写setTimeout(func1(this), 3000);
时,你会立即调用func1
函数。这和这个是一样的:
func1(this);
setTimeout(undefined, 3000);
相反,您希望传递一个新函数,该函数将在分配的时间后运行setTimeout
。
var self = this;
setTimeout(function() {
func1(self);
}, 3000);
或者,您可以将this
作为额外的参数传递,如 Richard B 所示。
你可以使用jQuery的默认函数.delay
如下所示:
$('.a').hover(function () {
$('.b').delay(2000).fadeIn(200);
});
js小提琴:https://jsfiddle.net/sukritchhabra/upkgtLyn/1
您必须按如下方式将参数传递给函数:
setTimeout(func1, 3000,this);
而不是
setTimeout(func1(this), 3000);