尝试创建隐藏导航栏时出现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之外。

请检查它是否在链接的例子中工作。