Reply To: Fade from page to page + loading bar

[grimski]

Ok, I think the code issue is sorted now!

Sorry, I’ve been away a few days so just looking at this again now. I updated my code to:

$(document).ready(function() {

    $('a:not(.page-head__toggle)').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);
    }
});

And that certainly closes the navigation when the back button is used in Safari. Reading up on it a bit it looks like it’s Safari’s default behaviour/how it treats this kinda thing so it wasn’t actually an issue with the fade out script. I found this: http://stackoverflow.com/questions/8788802/prevent-safari-loading-from-cache-when-back-button-is-clicked

In Chrome/Firefox the page still ‘flashes’ now before fading out. It fades out but then quickly comes back into view before the page redirects. It looks like it’s something to do with the following:

function newpage() {
    window.location = newLocation;
    $('body').show();
}

Which I imagine is this in the new code:

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

I also updated my CodePen as I realised it didn’t include pace.js – just incase that is impacting the issue.

http://codepen.io/anon/pen/QpMvpM

And I found this post which references pages being faded out after the back button is clicked: https://coderwall.com/p/aqyk7a/fade-out-page-when-clicking-links

Is that similar to what we’re doing here?