添加延遲這個jQuery懸停

Question

我使用這個代碼：

var timeout = 500; 
var closetimer = 0; 
var ddmenuitem = 0; 

function navBar_open() 
{ navBar_canceltimer(); 
    navBar_close(); 
    ddmenuitem = $(this).find('ul').css('visibility', 'visible');} 

function navBar_close() 
{ if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');} 

function navBar_timer() 
{ closetimer = window.setTimeout(navBar_close, timeout);} 

function navBar_canceltimer() 
{ if(closetimer) 
    { window.clearTimeout(closetimer); 
     closetimer = null;}} 

$(document).ready(function() 
{ $('#navBar > li').bind('mouseover', navBar_open) //mouseover 
    $('#navBar > li').bind('mouseout', navBar_timer)}); //mouseout 

document.onclick = navBar_close; 

工作正常

什麼，我想要做的是一個延遲添加到鼠標懸停事件

老實說，我在另一個網站上發現了這個代碼，並沒有完全理解它是如何工作的。

我得知，當用戶鼠標懸停時，navBar_timer函數被調用，這會在下拉菜單再次隱藏之前添加某種延遲，但我不太清楚如何在mouseover上實現懸停。

任何指導，將不勝感激

感謝

Answer 1

這是你在找什麼...點擊http://cherne.net/brian/resources/jquery.hoverIntent.html

Answer 2

試圖改變這一點：

$(document).ready(function() 
{ $('#navBar > li').bind('mouseover', navBar_open) //mouseover 
    $('#navBar > li').bind('mouseout', navBar_timer)}); //mouseout 

要這樣：

$(document).ready(function() { 
    $('#navBar > li').hover(function() { 
     closeHoverTimer = window.setTimeout(navBar_open, 500); //500ms timeout); 
    }, function() { 
     navBar_timer(); 
     window.clearTimeout(closeHoverTimer); 
    }); 
}); 

Answer 3

什麼版本的jQuery是你使用？如果你使用新的（1.4），你應該能夠利用新的$.delay()函數。然後，所有你必須改變的是內navBar_open()一個行：

ddmenuitem = $(this).find('ul').delay(timeout).css('visibility', 'visible'); 

Answer 4

我第二Reigel的建議使用hoverIntent插件。 要延遲其他jQuery的功能，我傾向於使用此功能：

var delay = (function(){ 
    var timer = 0; 
    return function(callback, ms){ 
     clearTimeout (timer); 
     timer = setTimeout(callback, ms); 
    }; 
    })(); 

，並稱之爲：

delay (function() { 
    // add whatever function you want delayed by 2 secs 
}, 2000); 

Answer 5

這應該工作以及：

$('#navBar > li').hover(
     function() { 
      var newthis = $(this); 
      timer = setInterval(function() {showTip(newthis)}, delay); 
     }, 
     function() { 
      clearInterval(timer); 
      $(this).find('ul:visible').fadeOut(speed); 
     }, 
     showTip = function(newthis) { 
      clearInterval(timer); 
      newthis.find('ul:hidden').fadeIn(speed); 
     } 
    ); 

Answer 6

像這樣的東西將使用jquert 1.4及更高版本來實現這一訣竅。不需要hoverIntent插件：

$("#yourdiv").hover(function(){ 
    $(this).stop(true).delay(400).animate({"height":"300px"},800, "easeOutBounce"); 
},function(){ 
    $(this).stop(true).animate({"height":"25px"}, 300, "easeOutBack"); 
}); 

只需在停止元素後添加延遲功能即可。如果將鼠標懸停在元素上，則在展開菜單前等待400毫秒。如果您在400毫秒時間範圍之前將鼠標移出元素，菜單將不會打開。