如何在懸停在JavaScript列表項上時創建暫停或延遲？

我是javascript新手。我有一個名單列表，當它懸停時，顯示一個包含該人聯繫信息的框。

我遇到的問題是盒子顯示太快;當把鼠標放在多個名字上時，會使箱子迅速起火。

鏈接：http://law.nd.edu/faculty/

這就是我認爲這是相關代碼：

<script> 
jQuery(".directory-list li").hover(
function() { 
    jQuery(this).find(".directory-info").fadeIn(200); ; 
}, 
function() { 
    jQuery(this).find(".directory-info").fadeOut(50);; 
} 
); 
</script>

感謝您的幫助。

來源

2013-04-03 Kyle Fitzenreiter

這個盒子正在執行你的'fadeIn'和'fadeOut'數字所建議的。你試過增加這些數字嗎？ – 2013-04-03 20:09:22

@RobertHarvey - 我相信OP在fadeIn開始之前需要一些延遲，而不是延長fadeIn。 – techfoobar 2013-04-03 20:11:36

看看這個小提琴，認爲這是你想要的。使用超時時間的另一個答案將丟失setTimeout()函數中的this的上下文，並且不起作用。

http://jsfiddle.net/RZUVS/1/。

來源

2013-04-03 20:30:01

你說得對。編輯我的答案來糾正這個錯誤。 – techfoobar 2013-04-03 20:33:12

@techfoobar - 我會評論你的答案，但我還沒有足夠的聲望呢。 :) – 2013-04-03 20:35:23

另外，它是在你的答案中包含相關代碼的常規練習，本身（所以它可以幫助讀者更快）。 – techfoobar 2013-04-03 20:37:28

可以使用setTimeout的如下介紹延遲：

var hoverTimer; 
jQuery(".directory-list li").hover(function() { 
    var elem = jQuery(this).find(".directory-info"); 
    hoverTimer = setTimeout(function() { 
    elem.fadeIn(200); 
    }, 1000); // wait for one second and then fadeIn 
}, 
function() { 
    clearTimeout(hoverTimer); 
    jQuery(this).find(".directory-info").fadeOut(50); 
});

來源

2013-04-03 20:10:35 techfoobar

Un-hover回調不應該取消超時，所以如果鼠標移出，它不會顯示彈出窗口？ – Barmar 2013-04-03 20:12:37

@Barmar - 是的，它應該。編輯以反映這一點。 – techfoobar 2013-04-03 20:13:11

看起來像dsundy的答案中的'hoverIntent'插件在一個整潔的包中解決了這個問題。 – Barmar 2013-04-03 20:13:51

最簡單的方法是將你的淡入之前添加延遲：

jQuery(this).find(".directory-info").delay(300).fadeIn(200);

來源

2013-04-03 20:10:35 dsundy

這仍然會顯示所有彈出窗口，只有300毫秒比以前。 – Barmar 2013-04-03 20:15:42

也不知道如果這樣做會使它不可取消（在mouseout上） – techfoobar 2013-04-03 20:17:08

是真的。 hoverIntent可能是要走的路。我給了這個贊成票。 – dsundy 2013-04-03 20:18:46

使用hoverIntent代替。

有一個很好的小插件，這是最簡單的方法來做到這一點。

http://cherne.net/brian/resources/jquery.hoverIntent.html

它將使從快速射擊的元素。

來源

2013-04-03 20:12:19

如何在懸停在JavaScript列表項上時創建暫停或延遲？

回答

相關問題