Неприятный эффект при выпадающем меню с помощью jQuery

Question

Я поднимаю своеобразное раскрывающееся меню, obviuosly Я бы хотел, чтобы мои пункты подменю оставались скрытыми до тех пор, пока пользователь не зависает над соответствующим элементом и не покажет им. Моя проблема заключается в том, что я получаю этот неприятный эффект затухания в эффекте fade, и я не могу заставить его работать, может ли кто-нибудь помочь мне разобраться с этой проблемой? 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(); 
    }); 
});