jQuery的 - 如果懸停更多然後在5秒鐘，然後顯示DIV

Question

我要顯示一個div，如果我一個元素的更多然後在5秒懸停，我已經試過張貼在計算器一些解決方案，但他們都不工作。

這是沒有時間我的懸停功能進行

$('div.avatar-with-data, .q-item-avatar').hover(function(){ 
     $(this).find('div.user-data').fadeIn('fast'); 
    },function(){ 
     $(this).find('div.user-data').fadeOut('fast'); 
    }); 

UPDATE

沒有答案的工作，但如果我改變

$(this).find('div.user-data').fadeIn('fast');

到

alert('shown');

然後它（不明白爲什麼，試圖改變淡入顯示（），但仍然沒有運氣）。 但我上面的懸停功能沒有超時工作。

Answer 1

使用hoverIntent，語法基本相同懸停。它超級簡單，它完全符合你想要的一些額外獎金。 HoverIntent做的比計劃懸停時計算出來的要好得多，當你真的在盤旋時，以及爲什麼你的鼠標正在通過。

var config = {  
    over: makeTall, // function = onMouseOver callback (REQUIRED)  
    timeout: 500, // number = milliseconds delay before onMouseOut  
    interval: 5000, // number = milliseconds delay before trying to call over  
    out: makeShort // function = onMouseOut callback (REQUIRED)  
}; 

$("#demo3 li").hoverIntent(config) 

從上面提供的hoverIntent連桿的第一頁

直接...

間隔： /讀數之間hoverIntent等待比較鼠標座標的毫秒數。當用戶的鼠標首次進入元素時，其座標被記錄下來。 「over」功能最快可以在單個輪詢間隔後調用。將輪詢間隔設置得更高會增加第一次可能的「over」呼叫之前的延遲時間，但也會增加到下一個比較點的時間。默認的時間間隔：100

Answer 2

試試這個

var tOut; 
$('div.avatar-with-data, .q-item-avatar').hover(function(){ 
    tOut = setTimeout(function(){ 
     $(this).find('div.user-data').fadeIn('fast'); 
    },5000); 
},function(){ 
    clearTimeout(tOut); 
    $(this).find('div.user-data').fadeOut('fast'); 
}); 

Answer 3

應該是比較簡單的。您需要在懸停時開始超時5秒，並在停止懸停時清除它。

var hoverTimeout; 

$('div.avatar-with-data, .q-item-avatar').hover(function() { 
    hoverTimeout = setTimeout(function() { 
     $(this).find('div.user-data').fadeIn('fast'); 
    }, 5000); 
}, function() { 
    clearTimeout(hoverTimeout); 
    $(this).find('div.user-data').fadeOut('fast'); 
}); 

Answer 4

您需要存儲一個變量，並使用setTimeout()。像這樣的東西應該工作：

var timer; 

$('div.avatar-with-data, .q-item-avatar').hover(function() { 
    hovered = true; 
    timer = window.setTimeout(function() { 
      $(this).find('div.user-data').fadeIn('fast'); 
    }, 5000); 
}, function() { 
    window.clearTimeout(timer); 
    $(this).find('div.user-data').fadeOut('fast'); 
}); 

Answer 5

也許使用JavaScript超時功能？

設置的超時，顯示在div 5000（5秒）的函數。當你懸停時清除超時。沒有測試過這一點，但希望它會幫助你進一步沿着...

var timeout; 

$('div.avatar-with-data, .q-item-avatar').hover(function(){ 
     timeout=setTimeout(showTooltip,5000);  
    },function(){  
     hideTooltip(); 
    }); 

function showTooltip() { 
    $(this).find('div.user-data').fadeIn('fast'); 
    clearTimeout(t); 
} 

function hideTooltip() { 
    $(this).find('div.user-data').fadeOut('fast'); 
    clearTimeout(timeout); 
} 

Answer 6

此代碼也將避免多次彈跳

var myVar; 
$(".liveUser").on({ 
     mouseenter: function() { 
     myVar = setTimeout(function(){ 
      $(".userDetail").stop().hide().fadeIn(); 
       }, 400); 
     }, 
     mouseleave: function() { 
      clearTimeout(myVar); 
      $(".userDetail").stop().fadeOut(); 
     } 
    }); 

Answer 7

我在堆棧溢出論壇的新用戶。我希望能幫助你！我喜歡用像流量這樣的小碼解決問題：

$(".liveUser").on("mouseover mouseout", function(event) { 
    if (event.type !== "mouseover") 
    clearTimeout(showID); 
    showID = setTimeout(function() {$(".userDetail")[(event.type === "mouseover"?"show":"hide")]()}, (event.type === "mouseover"?3000:0)); 
}); 

我希望我幫你！ Giuliano