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 に答える