5

誰かがメインのナビゲーション リンクをクリックしたときにページ ラッパーをフェード インおよびフェード アウトするために、いくつかの jQuery をナビにフックしようとしています。コード自体は正常に動作していますが、2 つの問題があります。

  • すべてをロードして削除し、フェードインするように、開始時にフラッシュがあります (これが CSS に関連しているかどうかはわかりません)。
  • リンクが壊れています。例: www.domain.com/contact に移動する代わりに「contact」をクリックすると、www.domain.com/undefiend に移動します。

どんな助けでも素晴らしいでしょう。ありがとう！！

JS

$(document).ready(function() {
    $('#page-wrap').css('display', 'none');
    $('#page-wrap').delay(500).fadeIn(1000);

    $('.menu-item').click(function(event) {
        event.preventDefault();
        newLocation = this.href;
        $('#page-wrap').fadeOut(1000, newpage);
    });

    function newpage() {
        window.location = newLocation;
    }
});

Nav のコード (wordpress を使用)

<div id="nav_wrap">
    <div id="nav"><?php wp_nav_menu( array( 'theme_location' => 'header-menu',) ); ?></div>
</div>
4

1 に答える 1

10

HTML:

<div id="page-wrap" style="display: none;">
    ...
</div>

jQuery:

$(document).ready(function() {
    $('#page-wrap').delay(500).fadeIn(1000);

    $('.menu-item').click(function(event) {
        event.preventDefault();
        var newLocation = this.href;
        $('#page-wrap').fadeOut(1000, function () {
            window.location = newLocation;
        });
    });
});
于 2013-07-26T21:56:39.520 に答える