jQuery淡入页面加载答案

【问题标题】：jQuery fade in page loadjQuery淡入页面加载
【发布时间】：2013-07-27 07:53:03
【问题描述】：

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

开始时有一个闪光，就像它加载所有内容，删除它一样，然后淡入（不确定这是否与 CSS 相关）。
链接已断开。例如：当您点击“联系人”时去 www.domain.com/contact 它去 www.domain.com/undefiend

任何帮助都会很棒。谢谢！！

$(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>

【问题讨论】：

链接在此之前有效吗？听起来您的 href 从一开始就错了，这并没有改变任何事情。
你能贴出“联系方式”的代码吗？
是的，如果我删除关于 JS 的部分，导航就可以正常工作。当您将鼠标悬停在底部的链接上（在 chrome 中）时，它会告诉您链接是正确的，但是当您单击它时，它会转到“未定义”
@Sergio 我编辑了原始帖子以显示导航代码
@Packy，我看到了，很好。务必提供代码，以便下次所有人都能更好地提供帮助。很好，你的问题得到了解答！

标签： javascript jquery html css scope

【解决方案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;
        });
    });
});

【讨论】：

谢谢，这对闪烁非常有效。漂亮而简单。
href 应该像这样抓取：var newLocation = $(this).attr('href');
@ChrisMcJava 那将是 jQuery 方式。一般来说，我对 OP 脚本所做的更改至少是我认为可能实现的解决方案（因此答案集中在它上面）。此外，在这种情况下，可能没有必要使用 jQuery……您在使用 this.href 时遇到过任何兼容性问题吗？谢谢！