javascript jQuery淡入页面加载
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17891603/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-27 10:00:39 来源:igfitidea点击:
jQuery fade in page load
提问by Packy
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:
当有人单击主导航链接时，我试图将一些 jQuery 连接到我的导航以淡入和淡出页面包装器。代码本身运行良好，但只有两个问题：
- There is a flash in beggining like it loads everything, removes it, then fades it in (not sure if this is CSS related).
- The links are broken. For example: when you click "contact" instead of going to www.domain.com/contact it goes to www.domain.com/undefiend
- 开始时有一个闪光，就像它加载所有内容，删除它，然后淡入（不确定这是否与 CSS 相关）。
- 链接已损坏。例如：当您单击“联系人”而不是访问 www.domain.com/contact 时，它会转到 www.domain.com/undefiend
Any help would be great. Thanks!!
任何帮助都会很棒。谢谢！！
JS
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;
}
});
The code for the Nav (using wordpress)
Nav 的代码（使用 wordpress）
<div id="nav_wrap">
<div id="nav"><?php wp_nav_menu( array( 'theme_location' => 'header-menu',) ); ?></div>
</div>
回答by falsarella
HTML:
HTML：
<div id="page-wrap" style="display: none;">
...
</div>
jQuery:
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;
});
});
});
