嘗試創建隱藏導航欄時出現MouseEnter和Mouseleave問題

Question

我試圖創建一個隱藏的導航欄，當其懸停時，寬度增大，並且當光標離開導航欄時，它會縮小回原始寬度。我使用jQuery和Parallax.js，但沒有組合mouseenter或mouseleave等似乎工作。由於我所試圖做跟隨鏈接的例子：

http://www.glamour.biz/

基本上我想要做相同的頂部導航，但在我的頁面的左側。這是我的javascript：

$("#navigation").mouseenter(function(){ 
$("#navigation").animate({ 
    opacity: 1, 
    width: "200px" 
    },500,"swing" 
); 
$("#navigation ul").animate({ 
    opacity: 1, 
    },500,"swing" 
); 
}); 

$("#navigation > ul").mouseleave(function(){ 
$("#navigation").animate({ 
    opacity: .75, 
    width: "40px" 
    },500,"swing" 
); 
$("#navigation ul").animate({ 
    opacity: 0, 
    },500,"swing" 
); 
}); 

以下是我的HTML：

<div id="navigation"> 
     <ul> 
      <li id="aboutb">Home</li> 
      <li>About</li> 
      <li>Portfolio</li> 
      <li>Contact</li> 
      <li>Resume</li> 
     </ul> 
</div> 

我基本上碰到過場動畫運行不止一次div的問題，或者它不會停留擴大而我徘徊在div。我在這個導航欄div的後面有另一個頁面寬div。

感謝您的任何幫助！

Answer 1

我已經成立了一個例子在這裏：

http://jsfiddle.net/fGnVd/

你所面對正在發生，因爲你沒有設置爲隱藏的div溢出的問題，這引起了菜單，以擴大輸入不可見的ul，但是在div之外。

請檢查它是否在鏈接的例子中工作。