如何使菜單淡入淡出？

Question

當您將鼠標懸停在#menu上時，它會褪色在＃menu-big中。我想在用戶將鼠標從＃menu-big移開時添加延遲。

我至今作品搞笑（第一次工作正常那麼它將無法正常運行）：http://jsbin.com/upopap/1

任何想法？

jQuery的

$(document).ready(function() { 

    $('#menu').hover(
    // mouseover 
    function(){ 
     $('#menu-big').fadeIn('fast'); 
    }, 
    // mouseout 
    function(){ 
     setTimeout(function(){ 
     $('#menu-big').fadeOut('fast') 
     }, 1000); 
    } 
); 


}); 

HTML

<div id="menu"> 
    <div id="menu-big"> 
     <ul> 
     <li><a href=""><span>Meet our Staff</span></a></li> 
     <li><a href=""><span>Services</span></a></li> 
     <li><a href=""><span>Associations</span></a></li> 
     </ul> 
    </div> 
    </div> 

Answer 1

它採取了一些嘗試，但我可以重新在Firefox您的問題。
我覺得這可能是更接近你想要的功能：

Basic Working Example

$(document).ready(function() { 
    $('#menu').mouseenter(function() { 
     $('#menu-big').fadeIn(400); 
    }); 
    $('#menu').mouseleave(function() { 
     $('#menu-big').delay(800).fadeOut(400); 
    }); 
}); 

API documentaion for .delay()

基本版本將覆蓋你問什麼，但你可能想使用高級版本，因爲它在啓動懸停事件之前有一段延遲，這將快速地將鼠標移入或移出#menu-big，從而解決問題。

Advanced Working Example

$(function() { 
    var timeoutId; 
    $("#menu").hover(function() { 
     if (!timeoutId) { 
      timeoutId = window.setTimeout(function() { 
       timeoutId = null; 
       $("#menu-big").fadeIn('slow'); 
      }, 1000); 
     } 
    }, 
    function() { 
     if (timeoutId) { 
      window.clearTimeout(timeoutId); 
      timeoutId = null; 
     } 
     else { 
      $("#menu-big").delay(800).fadeOut('slow'); 
     } 
    }); 
}); 

這種方法是從This Answer適應它是否適合你，你可能希望通過在其上的贊成票爲好。