淡入淡出菜单

Question

当用户将鼠标悬停在无序菜单列表上时，我使用以下jQuery代码创建淡入淡入淡出效果。但我似乎无法使淡入淡出。非常感激任何的帮助。

这是一个在线测试页面的链接： http://www.youmeusdesign.co.uk/menutest/

这里是jQuery代码：

$(function(){ 
    $("#menu ul li").hover(function(){ 
      $(this).children("ul").fadeIn(500); 
     }, 
     function(){ 
      $(this).children("ul").fadeOut(500); 
    }) 
}) 

这里是HTML：在Firefox

<div id="menu"> 
    <ul> 
     <li aria-haspopup="true"><a href="index.html"></a> 
      <ul> 
       <li><a href="index.html">ABOUT</a> 
        <ul class="submenu1"> 
         <li class="column1" aria-haspopup="false"><a href="index.html">Approach</a></li> 
         <li class="column1" aria-haspopup="false"><a href="index.html">Team</a></li> 
        </ul> 
       </li>  
       <li><a href="index.html">CASE STUDIES</a> 
        <ul class="submenu2"> 
         <li class="column1" aria-haspopup="false">TITLE1</li> 
         <li class="column1" aria-haspopup="false"><a href="index.html">Project A</a></li> 
         <li class="column1" aria-haspopup="false"><a href="index.html">Project B</a></li> 
         <li class="column1" aria-haspopup="false"><a href="index.html">Project C</a></li> 
         <li class="column1" aria-haspopup="false"><a href="index.html">Project D</a></li> 
         <li class="column1" aria-haspopup="false"><a href="index.html">Project E</a></li> 
         <li class="column1" aria-haspopup="false"><a href="index.html">Project F</a></li> 
         <li class="column1" aria-haspopup="false"><a href="index.html">Project G</a></li> 
         <li class="column2 negative-margin-160" aria-haspopup="false">TITLE2</li> 
         <li class="column2" aria-haspopup="false"><a href="index.html">Project H</a></li> 
         <li class="column2" aria-haspopup="false"><a href="index.html">Project I</a></li> 
         <li class="column2" aria-haspopup="false"><a href="index.html">Project J</a></li> 
         <li class="column2" aria-haspopup="false"><a href="index.html">Project K</a></li> 
         <li class="column2" aria-haspopup="false"><a href="index.html">Project L</a></li> 
         <li class="column2" aria-haspopup="false"><a href="index.html">Project M</a></li> 
         <li class="column2" aria-haspopup="false"><a href="index.html">Project N</a></li> 
         <li class="column2" aria-haspopup="false"><a href="index.html">Project O</a></li> 
        </ul> 
       </li> 
       <li><a href="index.html">NEWS &amp; PRESS</a> 
        <ul class="submenu3"> 
         <li class="column1" aria-haspopup="false"><a href="index.html">News</a></li> 
         <li class="column1" aria-haspopup="false"><a href="index.html">Press</a></li> 
         <li class="column1" aria-haspopup="false"><a href="index.html">Awards</a></li> 
        </ul> 
       </li> 
       <li><a href="index.html">CONTACT</a> 
       </li>  
      </ul> 
     </li>  
    </ul> 
</div> 

Answer 1

您正遇到CSS和Javascript之间的冲突。在你的CSS，你有这样的：

#menu ul ul { 
    position: absolute; 
    width: 545px; 
    height: 270px; 
    left: 0; 
    top: 80px; 
    display: none; 
    padding-top: 20px; 
    background: #CCC; 
} 

然后当你将鼠标悬停在li元素之一，你的CSS做这个的：

#menu ul li:hover > ul { 
    display: block; 
    background-image: none; 
} 

JavaScript是试图淡化的元素，但这太迟了 - 在这一点上，CSS的元素已经被设置为display: block。当您关闭时，jQuery将内联样式添加到#menu ul li ul元素，设置为opacity: 0。

下次将鼠标悬停在元素上时，即使CSS将元素设置为display: block，元素仍然隐藏，因为它们被内联为opacity: 0，让它们随意淡入。

最快的解决方法是在CSS中为#menu ul ul设置不透明度为0，但我很好奇为什么.fadeIn（）不适合你。

Answer 2

工作，但没有按在铬中使用胺化或显示/隐藏

Answer 3

Tha你的意见。已尝试使用动画，现在它可以在Chrome和Safari中使用，但在页面加载后第一次将鼠标悬停在菜单上时，淡入似乎不起作用，并且必须重新悬停第二次才能使其工作：

这里是一个在线修改测试页的链接：http://www.youmeusdesign.co.uk/menutest/

下面是修改jQuery的：

$(function(){ 
    $("#menu ul li").hover(function(){ 
      $(this).children("ul").animate(
      {"opacity": "1"}, 
      500); 
     }, 
     function(){ 
      $(this).children("ul").animate(
      {"opacity": "0"}, 
      500); 
    }) 
}) 

非常感谢。