Question

我试图创建一个隐藏的导航栏,当游轮盘旋时,宽度会增加,当光标离开导航栏时,它会缩回原来的宽度。我使用jQuery 和 Parallax.js, 但似乎没有使用鼠标输入或鼠标离开等组合。作为我试图按照链接进行工作的一个例子 :

http://www.glamour.biz/" rel="nofollow">http://www.glamour.biz/

基本上我想做相同的顶部导航,但在我的页面左侧。这是我的标语:

$("#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/

你面对的问题是因为你没有把分流的溢出量设为隐藏, 这使得菜单在进入UL时扩大, 后者是看不见的, 但是在分流之外。

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

友情链接