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;
        });
    });
});
Share:
11,205
Packy
Author by

Packy

Updated on June 04, 2022

Comments

  • Packy
    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>