jQuery fade in page load
11,205
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;
});
});
});
Author by
Packy
Updated on June 04, 2022Comments
-
Packy almost 2 years
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:
- 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
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; } });
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>