jQuery fade in page load

Question

I am trying to hook some jQuery to my nav to fade in and out the page wrapper when someone click on a main nav link. The code itself is working fine, but just have 2 issues:

• There is a flash in beggining like it loads everything, removes it, then fades it in (not sure if this is CSS related).
• The links are broken. For example: when you click "contact" instead of going to www.domain.com/contact it goes to www.domain.com/undefiend

Any help would be great. Thanks!!

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

The code for the Nav (using 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;
        });
    });
});