使用jQuery下拉菜單的惡劣效果

Question

我正在建立一種下拉菜單，明顯地我希望我的子菜單項保持隱藏狀態，直到用戶將鼠標懸停在適當的元素上並讓它們顯示爲止。我的問題是我得到這個令人討厭的淡入/淡出效果，我無法讓它工作，任何人都可以請幫我理清這個問題嗎？ You can find my code here。

HTML代碼：

<nav id="mainNav"> 
    <ul> 
     <li class="topMenu"><a href="#">Section #1</a></li> 
     <li class="topMenu"><a href="#">Section #2</a></li> 
     <li class="topMenu"><a href="#">Section #3</a> 
      <ul> 
       <li><a href="#">SubMenu Item #1</a></li> 
       <li><a href="#">SubMenu Item #2</a></li> 
       <li><a href="#">SubMenu Item #3</a></li> 
      </ul> 
     </li> 
     <li class="topMenu"><a href="#">Section #4</a> 
      <ul> 
       <li><a href="#">SubMenu Item #1</a></li> 
       <li><a href="#">SubMenu Item #2</a></li> 
       <li><a href="#">SubMenu Item #3</a></li> 
       <li><a href="#">SubMenu Item #4</a></li> 
       <li><a href="#">SubMenu Item #5</a></li> 
      </ul> 
     </li> 
     <li class="topMenu"><a href="#">Section #5</a> 
      <ul> 
       <li><a href="#">SubMenu Item #1</a></li> 
       <li><a href="#">SubMenu Item #2</a></li> 
      </ul> 
     </li> 
     <li class="topMenu"><a href="#">Section #6</a></li> 
    </ul> 
</nav> 

CSS

body { 
    width: 960px; 
    margin: 0 auto; 
} 

a { 
    text-decoration: none; 
} 

div#menu { 
    width: 960px; 
    height: 50px; 
    background-color: #000; 
    border-bottom: 2px solid #ff0078; 
} 

div#menu nav#mainNav a { 
    font-family: 'BebasNeueRegular', 'Arial, Helvetica, sans-serif'; 
    color: #e4e4e4; 
    text-transform: uppercase; 
    font-size: 20px; 
} 

div#menu nav#mainNav ul li { 
    top: 17px; 
    left: 25px; 
    margin-right: 30px; 
    display: inline; 
    position: relative; 
} 

div#menu nav#mainNav ul li ul { 
    display: none; 
    position: absolute; 
    top: 25px; 
    width: 150px; 
} 

div#menu nav#mainNav ul li ul li { 
    display: block; 
    left: 0; 
    margin-bottom: 5px; 
    padding: 5px; 
    background: #000; 
} 

div#menu nav#mainNav ul li ul li:hover { 
    border-bottom: 1px solid #ff0078; 
} 

div#menu nav#mainNav ul li ul li a { 
    display: block; 
}​ 

JS腳本

$(document).ready(function() { 
    var menuItems = $('div#menu nav#mainNav ul').find('li.topMenu'); 

    menuItems.on('mouseover', function() { 
     var submenu = $(this).find('ul'); 
     $(this).find('ul').fadeIn(); 
    }); 

    menuItems.on('mouseout', function() { 
     var submenu = $(this).find('ul'); 
     $(this).find('ul').fadeOut(); 
    }); 
});​ 

Answer 1

之前，你動畫的屬性，你應該隨時停止運行之前的動畫，否則你會得到討厭的效果。

見新jsFiddle

$(document).ready(function() { 
    var menuItems = $('div#menu nav#mainNav ul').find('li.topMenu'); 

    menuItems.on('mouseover', function() { 
     var submenu = $(this).find('ul'); 
     $(this).find('ul').stop().fadeIn(); 
    }); 

    menuItems.on('mouseout', function() { 
     var submenu = $(this).find('ul'); 
     $(this).find('ul').stop().fadeOut(); 
    }); 
});​ 

Answer 2

試試這個JS：

$(document).ready(function() { 
    var menuItems = $('div#menu nav#mainNav ul').find('li.topMenu'); 

    menuItems.hover(
     function() { 
      var submenu = $(this).find('ul'); 
      $(this).find('ul').fadeIn(); 
     }, 
     function() { 
      var submenu = $(this).find('ul'); 
      $(this).find('ul').fadeOut(); 
    }); 
});