2010-01-24 147 views
2

我使用這個代碼:添加延遲這個jQuery懸停

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上實現懸停。

任何指導,將不勝感激

感謝

回答

1

試圖改變這一點:

$(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); 
    }); 
}); 
+0

這是有道理的,但不幸的是,它只是打破了懸停效果..謝謝你的時間 – Ross 2010-01-24 01:08:50

+0

請看到更新的代碼... – Ropstah 2010-01-24 01:12:42

+0

沒有抱歉,同樣的問題。至少我明白這個邏輯 – Ross 2010-01-24 01:20:31

2

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

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

我第二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); 
0

這應該工作以及:

$('#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); 
     } 
    ); 
1

像這樣的東西將使用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毫秒時間範圍之前將鼠標移出元素,菜單將不會打開。