如何向CSS垂直下拉菜單添加延遲

Question

我需要爲我的下拉菜單中的鼠標懸停事件添加延遲，以便如果有人將鼠標懸停在頁面上另一個鏈接的菜單上，菜單不會立即下降。 感謝您的幫助。

http://jsfiddle.net/cgagliardi/NPVVQ/

Answer 1

您可以將setTimeout()增加延遲show()，並在懸停時清除超時，以便如果用戶在延遲結束之前移出鼠標，它將被取消。你可以封裝在自己的jQuery插件：

jQuery.fn.hoverWithDelay = function(inCallback,outCallback,delay) { 
    this.each(function(i,el) { 
     var timer; 
     $(this).hover(function(){ 
      timer = setTimeout(function(){ 
       timer = null; 
       inCallback.call(el); 
      }, delay); 
     },function() { 
      if (timer) { 
       clearTimeout(timer); 
       timer = null; 
      } else 
       outCallback.call(el); 
     }); 
    }); 
}; 

您可以使用這樣的：

$('ul.top-level li').hoverWithDelay(function() { 
    $(this).find('ul').show(); 
}, function() { 
    $(this).find('ul').fadeOut('fast', closeMenuIfOut); 
}, 500); 

我的鵝卵石，在匆忙插件在一起，所以我敢肯定，這可以改善，但它似乎可以在您演示的這個更新版本中工作：http://jsfiddle.net/NPVVQ/3/

至於解釋我的代碼是如何工作的：.each()循環遍歷jQuery對象中調用該函數的所有元素。對於每個元素，都會創建一個懸停處理程序，該程序使用setTimeout()來延遲調用所提供的回調函數 - 如果在時間到達之前發生鼠標離開，則會清除此超時值，以便不調用inCallback。在inCallback和outCallback上使用.call()方法來設置this的正確值。

Answer 2

您可以使用CSS3動畫或過渡。

http://www.css3maker.com/css3-animation.html

http://www.css3maker.com/css3-transition.html

或者你可以在Javascript處理超時，我想一個簡單的方法是setTimeoutshow();之前附加和鼠標離開事件中使用clearTimeout

Answer 3

我更新了代碼現在你的菜單在1/2秒後出現。 Demo

$('#navigation').show(2000); 

這是秀（）在jQuery的足以延緩動畫 ...。

我只是用另一個div來暫停動畫，你可以看到它。