javascript - jQuery淡入页面加载

Question

当有人单击主导航链接时，我正在尝试将一些 jQuery 连接到我的导航以淡入和淡出页面包装器。代码本身运行良好，但只有两个问题：

• 开始时有一个闪光，就像它加载所有内容，删除它，然后淡入它（不确定这是否与 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;
        });
    });
});