不能淡出子菜單，用jQuery

Question

這是我的第一個問題！ Certanly你會幫助我。

I'm這個工作水平菜單：

HTML：

CSS：

body 
    { 

    font-family: "calibri"; 
    margin:0; 
    padding: 0; 
    } 

    #menu 
    { 
    width: 100%; 
    min-width: 400px; 
    height: 30px; 
    background-color: #222; 
    } 

    #menu ul 
    { 
    line-height: 30px; 
    } 

    #menu ul li 
    { 
    list-style: none; 
    float: left; 
    position: relative; 
    } 

    #menu ul li a 
    { 
    padding-left: 5px; 
    text-decoration: none; 
    width: 100px; 
    height: 30px; 
    color: white; 
    background-color: black; 
    display: block; 
    } 

    #menu ul a:hover 
    { 
    background-color: grey; 
    } 

    #menu li ul 
    { 
    display: none; 
    position: absolute; 
    left: 0px; 
    top: 100%; 
    padding-top: 3px; 
    padding-left: 3px; 
    line-height: 20px; 
    } 

    #menu li ul li a 
    { 
    height: 20px; 
    font-size: small; 
    } 

    #menu li:hover > ul 
    { 
    display: block; 
    } 

    #menu li ul li a 
    { 
    width: 150px; 
    } 

    #menu li ul li 
    { 
    padding-top: 1px; 
    } 

    #menu li ul li ul 
    { 
    left: 100%; 
    top: 0; 
    } 

    #menu li:hover > a 
    { 
    background-color: grey; 
    } 

JQUERY：

$(function() { 

    $('li > ul').animate({'opacity': 0}); 

    $('li').hover(function() { 
    $(this).find('ul:first').stop().animate({'opacity': 1}); 
    },function() { 
    $(this).find('ul:first').stop().animate({'opacity': 0}); 
    }); 

}); 

正如你所看到的，淡出效果（不透明度）是wor國王當選項是徘徊，但我怎麼能使它淡出？我正在使用IE9。

謝謝！

Answer 1

我已經找到了解決辦法...

在CSS，我有這樣評論：

/*#menu li:hover > ul { display: block;}*/ 

我也與此更換的jQuery：

$('#menu ul li').hover(function() { $(this).find('ul:first').stop().fadeToggle('fast');}); 

謝謝！

Answer 2

首先，我提供了一個jsFiddle提供的代碼。正如你所看到的，它工作得很好，這是因爲jsFiddle被設置爲運行Javascript onLoad。

所以，你需要做的就是確保在加載DOM後您的功能運行時，通過在代碼塊包裝它像下面這樣：

$(document).ready(function() { 
    // Your JS function here 

}); 

Answer 3

我假設你想在選項褪色當鼠標指針懸停在它上面時，當你將鼠標指針從相同的選項上移開時，淡出它。在你的問題中明確指出。但是因爲你是SO的新手，所以你不會被陷入低谷：P

做出這個假設，你需要爲mousever和mouseout事件單獨編寫代碼。

$(document).ready(function() { 

    $('li').mouseover(function(e){ 
     $(this).fadeIn(500); 
    }); 

    $('li').mouseout(function(e){ 
     $(this).fadeOut(500); 
    }); 

}); 

試着從jquery主頁閱讀關於mouseover和mouseout事件。