0

一連のリンクを含む水平メニュー バーを作成しています。現在のページ リンクの下に、固定サイズで背景が黒の絶対位置の div があります。他のリンクのいずれかにカーソルを合わせると、この「選択インジケーター」が、カーソルを合わせたリンクの下にスライドします。希望どおりにこの効果を作成することができました。

ただし、ページが最初に読み込まれるときの「セレクター」div の位置に問題があります。何らかの理由で、div は初期位置を本来あるべき場所 (現在のページ リンクの下) のちょうど 5 ピクセル左に設定します。アニメーション自体と同じコードを使用して div を初期化していますが、バグはページが読み込まれたときにのみ表示されます。リンクがホバーされるとすぐに、ページが更新/再ロードされるまで、「セレクター」が正しい位置にスライドします。

メニュー (およびバグ) の実際の例は、www.jamiedavies.meにあります。

私のナビゲーションバーのhtml構造は次のとおりです。

<header>
    <h1>Main Title</h1>
    <nav id="mainNav">
        <ul>
            <li><a href="#1" title="Link1" class="current">Link1</a></li>
            <li><a href="#2" title="Link2">Link2</a></li>
            <li><a href="#3" title="Link3">Link3</a></li>
            <li><a href="#4" title="Link4">Link4</a></li>
        </ul>
    </nav>
    <div id="pageSelector"></div>
</header>

関連する CSS は次のとおりです。

nav#mainNav {
   position: absolute;
   right: 0px;
   top: 63px;
}

nav#mainNav ul li {
   display: inline;
   list-style-type: none;
   margin-left: 35px;
}

div#pageSelector {
   height: 5px;
   left: -999px;
   position: absolute;
   top: 91px;
   visibility: hidden;
   width: 25px;
}

セレクターのアニメーション化を担当する javascript/jquery コードは次のとおりです。

$( document ).ready( function() {

    var offset = $( "header" ).offset().left;

    $( "#pageSelector" ).css( "visibility", "visible" );

    $( "#mainNav li" ).find( "a" ).each( function( i ) {
        $( this ).mouseover( function( e ) {
            var l = $( this ).offset().left - offset;
            var w = $( this ).width();
            $( "#pageSelector" ).animate( {
                left: l,
                width: w
            }, 175, "swing" );
        } );
    } );

    $( "#mainNav" ).mouseleave( function( e ) {
        $( "#pageSelector" ).animate( {
            left: $( "#mainNav li a.current" ).offset().left - offset,
            width: $( "#mainNav li a.current" ).width()
        }, 175, "swing" );
    } );

    $( "#mainNav" ).mouseleave();
} );
4

1 に答える 1

1

使ってみてください

$(window).bind("load", function() {

それ以外の

$( document ).ready( function() {

なぜなら、アニメーションスクリプトは、特別なフォントやグラフィックスなど、他の要素が最初に読み込まれる前に実行を完了したようです。これにより、位置合わせの計算で数学的なエラーが発生した可能性があります。

これで問題が解決することを願っています。

于 2012-06-18T00:22:35.100 に答える