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

jQuery淡入页面加载

1 个答案: