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

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