jQueryページロードでフェードイン

Question

メインナビゲーションリンクをクリックしたときにページラッパーをフェードインまたはフェードアウトするためにjQueryをナビゲーションにフックしようとしています。コード自体は正常に動作しますが、わずか2つの問題持っている：それは、すべてをロードし、それを削除するようbegginingでフラッシュがあり

• 、 は、その後でそれをフェードを（これは関連するCSSがあるかどうかわかりません）。
• リンクが壊れています。例：あなたは「接触」www.domain.com/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; 
    } 
}); 

（ワードプレスを使用して）ナビゲーション用のコード

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

Answer 1

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; 
     }); 
    }); 
});