AJAX page transition effect

[Anonymous]

Ive been working with AJAX Jquery lately and ive been able to load pages onto a container real easily. Although i want to add effects when switching pages. To make this as easy as possible i want to create a fade effect when switching. So the current page fades out, while the next page fades in. How can i do something like this? Here is the ajax i have.

$(document).ready(function() {

    $("#pages-load-area #pages-container").load("./pages/" + initialPage);

    $("#header-navigation a").on("click", function() {

        var urlPageName = $(this).attr("href");

        $.ajax({
            type: "GET",
            url: "./pages/" + urlPageName,
            processData: false,
            crossDomain: true,
            cache: false,
            success: function (result, responseData) { $("#pages-load-area #pages-container").html(result); },
            error: function (responseData, textStatus, errorThrown) { alert('AJAX failed'); },
        });

        return false;

    }); 

});

[Chromawoods]

Something like this? (might be a bit sloppy, but hopefully you get the idea)..
http://codepen.io/chromawoods/pen/nywfc

The trick here is to use a callback function for jQuery’s fadeOut function, which fires after the animation is done. So basically, first fadeOut the content. Then, fetch the new content and fadeIn. You could also add a loading animation between the first content has faded out and the new content begins to fade in.

[Anonymous]

Thanks although how would i implement that into the AJAX code i have? It’s still a little confusing.

[Chromawoods]

The load() function does exactly what you want; you don’t need the $.ajax() function at all. You basically just need to exchange the selectors in my code with the ones you want to use.

[Author]

Posts