Question

我正在尝试在下拉菜单的悬停效果期间实现时间延迟。我试图使用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，这是许多类似问题中的建议。有人能告诉我这里出了什么问题吗？

Answer 1

当您编写setTimeout(func1(this), 3000);时，您立即调用func1函数。与此相同：

func1(this);
setTimeout(undefined, 3000);

相反，您希望传递setTimeout一个将在指定时间后运行的新函数。

var self = this;
setTimeout(function() {
  func1(self);
}, 3000);

或者您可以将this作为额外参数传递，如Richard B所示。

Answer 2

我相信您必须将参数传递给函数，如下所示：

setTimeout(func1, 3000,this);

而不是

setTimeout(func1(this), 3000);

Answer 3

您可以使用jQuery的默认函数.delay，如下所示：

$('.a').hover(function () {
    $('.b').delay(2000).fadeIn(200);
});

jsFiddle：https://jsfiddle.net/sukritchhabra/upkgtLyn/1

用jQuery

3 个答案: