I use a little bit of JavaScript to fade out my page when a link is clicked before it redirects to a new page. The problem I'm having is the page fades out but then it quickly comes back into view for a split second before the page is redirected. As this refers to page redirection it's difficult to provide a CodePen example.

This seems to happen because of the newpage function I've included. I don't think I used this originally but I needed to put it in as sometimes when using the browser back button, especially on iOS Safari, it would display a blank page.

This is the script I'm currently using:

$(document).ready(function() {

    $('[href*="website-url.com/"]').click(function(event) {
        event.preventDefault();
        newLocation = this.href;
        $('body').fadeOut(150, newpage);
    });

    function newpage() {
        window.location = newLocation;
        $('body').show().removeClass('show-nav').addClass('hide-nav');

        setTimeout(function() {
            $('body').removeClass('hide-nav');
        }, 500);
    }
});

The .removeClass('show-nav').addClass('hide-nav'); bit refers to my full-page navigation I'm using. Clicking the back button in Safari loads a page with the nav open by default. This is to force it to close it - though again, it does 'jump' a bit before it's hidden and you do catch a glimpse of it, if only for a fraction of a second.