如何使菜单淡入淡出？

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适应它是否适合你，你可能希望通过在其上的赞成票为好。