使用jQuery懸停延遲

我試圖在下拉菜單的懸停效果期間實現時間延遲。我正在嘗試使用setTimeout，並且下拉菜單在懸停時可以正常工作，但我沒有得到延遲。它只是瞬間發生。下面是我的代碼：使用jQuery懸停延遲

$(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其建議在許多類似的問題。有人能告訴我這裏出了什麼問題嗎？

來源

2016-03-11 whitehat

當你寫setTimeout(func1(this), 3000);，你會立即調用func1功能。這是同樣的事情，因爲這：

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

相反，你想傳遞setTimeout這將在規定的時間後運行一個新的功能。

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

或者你可以通過this作爲一個額外的參數理查德·B所示。

來源

2016-03-11 23:18:13

感謝您的回答。不知何故，setTimeout無法訪問'this'（它被視爲窗口對象而不是'li'），所以我通過將它存儲在一個變量中做了一個解決方法。它的工作現在:-) – whitehat

我相信你有參數傳遞給函數如下：

setTimeout(func1, 3000,this);

，而不是

setTimeout(func1(this), 3000);

來源

2016-03-11 23:17:16

你可以使用jQuery的默認功能.delay這樣的：

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

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

來源

2016-03-11 23:20:27

使用jQuery懸停延遲

回答

相關問題