1

私は、マウスがブラウザの近くの領域に入るとナビゲーションメニューをブラウザの上部から下にスライドさせ、マウスがメニューから離れると消える方法を探していました。

この質問のおかげで私はずっと近くにいます。

私が抱えている問題はアニメーションにあります。それは非常に奇妙な振る舞いをしています。JsFiddleでコードをエミュレートして確認しました。

http://jsfiddle.net/tVreF/2/

しばらく待って、マウスをページ内で動かし、ウィンドウのサイズを変更してみてください。最終的にはアニメーション化されます。明らかに、これは意図した方法ではありません。

私がこれを正しい方法で行っているかどうかわからないので、どんなアドバイスも大歓迎です！

編集：混乱を解消するために-つまり、ナビゲーションメニューが最初に表示されないようにし、マウスが画面の上部に近づくとメニュー全体が下にスライドします。Windowsのタスクバーを「自動非表示」に設定するとどうなるかと同じです。

4

2 に答える 2

1

私がやったことはアプローチを変えました。私はこのフィドルでイベントキャッチャーdivを作成しました：

http://jsfiddle.net/L2J5X/2/

また、メニューがアニメーション化するdivにマウスが移動したとき、メニューがアニメーション化するdivからマウスが移動したときに、イベントハンドラーが追加されました。

function dothething(amover)
    {
    if(amover) 
        {
            $(".nav").animate({top: '0px'}, 200, "linear");    
        } 
        else
        {
            window.setTimeout(function(){if(!$amthere){
            $(".nav").animate({top: '-40px'}, 200, "linear");        
            }},100);
        }
    }
        $("#detect").mouseover(function(){dothething(true);});
        $("#detect").mouseout(function(){dothething(false);});
$("#mainNav").mouseover(function(){$amthere=true;});
$("#mainNav").mouseout(function(){$amthere=false;});
$amthere = false;
​

divは絶対的にトップのz-indexで配置されるため、イベントは常にキャッチされます。ランダムに配置されたときに他のdivが何をするかに関係なく（大きな緑色のブロックを参照）。

これが少し役立つことを願っています。

* 編集 *

キャッチャーdivからメニューに移動するときに非表示にならないように短い遅延を追加しました。これが$amthere変数の目的であり、メニューに表示されているかどうかを確認します。次に、100ミリ秒の遅延で、実際のマウスアウトに進むのが適切かどうかを確認します。そうでない場合は、何もしない場合は、非表示メニューを非表示にします。

于 2012-09-19T10:02:27.613 に答える
1

http://sperling.com/examples/menuh/
これを試してください。純粋なcssを使用してアニメーション化できます...?

これはあなたが必要とする解決策ではないかもしれませんが、それはより良い代替
編集
です

于 2012-09-19T09:49:42.433 に答える