jQuery mờ dần khi tải trang

Question

Tôi đang cố gắng móc một số jQuery vào nav của tôi để làm mờ dần trong và ngoài trình bao bọc trang khi ai đó nhấp vào liên kết điều hướng chính. Mã này bản thân đang làm việc tốt, nhưng chỉ có 2 vấn đề:

• Có một flash trong beggining như nó tải tất cả mọi thứ, loại bỏ nó, sau đó mất dần nó trong (không chắc chắn nếu điều này là CSS liên quan).
• Các liên kết bị hỏng. Ví dụ: khi bạn bấm vào nút "tiếp xúc" thay vì đi đến www.domain.com/contact nó đi để www.domain.com/undefiend

Bất kỳ trợ giúp sẽ là tuyệt vời. Cảm ơn!!

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

Mã cho Nav (sử dụng wordpress)

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