淡入淡出菜單

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); 
    }) 
}) 

非常感謝。