Keep current page visible while loading another page with ajax and css transition

Question

I am using ajax to load next page, it works fine. (wordpress with aws ajaxify plugin )

pastebin of ajax js

All i want now is to keep current page visible till the next page loads and occupy the viewport.

Here is the link for the demo site m working on http://goo.gl/R8sGB5

So when i click on any link, my ajax plugin does the following

prepare the variables

contentSelector = '#' + aws_data['container_id'],
        $content = $(contentSelector),

then it add a fade out transition

$body.ajaxify();

    // Hook into State Changes
    $(window).bind('statechange',function(){
        // Prepare Variables
        var
        State       = History.getState(),
        url         = State.url,
        relativeUrl = url.replace(rootUrl,'');

        // Set Loading
        $body.addClass('loading');

        // Start Fade Out
        // Animating to opacity to 0 still keeps the element's height intact
        // Which prevents that annoying pop bang issue when loading in new content

        if ( '' != aws_data['transition'] ) {
        $content.animate({opacity:0.6},900);

So after this slow fadeout, the plugin request new page with ajax

// Ajax Request the Traditional Page

And the page loads well. Now here i want to have something like the current page is still visible in background and the new page comes in with a slideLeft Transition.

For which i have my slideLeft css class ready .

I am ready to apply the $content.addClass("slideLeft"); but when i do this current page disappears first, and then on the black screen next page comes in..

So how can i achieve that, current page remains visible untill next page comes in slide to left most position ?

The very close prototype of how i want it to be is this https://www.dropbox.com/guide/admin

Thanks

Edit1

According to the suggestion by @vinrav , i altered the code but still when the next page loads, the current page disappears

Here is the pastebin of my altered code

http://pastebin.com/gVFjayDK

line no 122 to 125( fadeout after ajax request )
line no 140 ( adding transition class) 

I guess i'm having issues with correct order, looking for help.

Many Thanks

Answer 1

You need to change the order of process for a click.

1. prepare the variables.
2. Let ajax request for the page.
3. Then fade out current page. The fade out time needed to be large enough to meet the time for fetching the requested page by ajaxing. It depends on your server speed, client internet speed and other factors.
4. When you get the requested page, start your slide-left transition and if the current page fade out time is large enough you wont get the black screen.

My recommendation Wait until you get the requested page via ajax, then only start the fade out of current page. Your close prototype(https://www.dropbox.com/guide/admin) do like that. Dropbox site wait for the response to come from ajax (You can see a bar at top of the page, it tell us to wait... the ajax is on the way... )

EDIT:

1. prepare the variables.
2. Let ajax request for the page.
3. Get the requested page.
4. start the fade out.
5. start the slide-left