1

我试图创建一个隐藏的导航栏，当悬停在其上时，宽度会增加，当光标离开导航栏时，它会缩小到原来的宽度。我正在使用 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。

谢谢你的帮助！

4

1 回答 1

0

我在这里设置了一个例子：

http://jsfiddle.net/fGnVd/

您面临的问题是因为您没有将 div 的溢出设置为隐藏，这导致菜单在输入不可见但在 div 之外的 ul 时展开。

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

于 2012-05-24T08:56:46.877 回答