jQuery淡入页面加载 [英] jQuery fade in page load

问题描述

我正在尝试将一些jQuery挂钩到我的导航，以便在有人点击主导航链接时淡入和淡出页面包装。代码本身工作正常，但只有2个问题：

I am trying to hook some jQuery to my nav to fade in and out the page wrapper when someone click on a main nav link. The code itself is working fine, but just have 2 issues:

• 有一个闪存在开始像加载一切，删除它，
  然后将其淡入（不确定这是否与CSS相关）。


• 链接已损坏。例如：当您单击联系人而不是
  转到www.domain.com/contact时，它会转到
  www.domain.com/undefiend

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

Any help would be great. Thanks!!

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）

The code for the Nav (using wordpress)

<div id="nav_wrap">
    <div id="nav"><?php wp_nav_menu( array( 'theme_location' => 'header-menu',) ); ?></div>
</div>

推荐答案

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淡入页面加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！