jQuery淡入页面加载

Question

当有人点击主导航链接时,我试图将一些jQuery挂钩到我的导航以淡入和退出页面包装器.代码本身工作正常,但只有2个问题:

• 有一个闪存在开始像加载一切,删除它,然后淡入它(不确定这是否与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;
    }
});

导航的代码(使用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;
        });
    });
});