PJAX delay page load

Question

I am working on PJAX powered website.

Problem is that I want to create animated website, when we animate content out of the view and then animate new content into the view.

You can see example here: http://ventguru.infoaleja.lt/

As you can see there's initial animation and after you select anything from top menu everything just disappears and new content is animated in.

What I want to do is that after you click menu item new content is not shown until we animate out old content.

What kind of way to archieve this you could offer?

Answer 1

You can use PJAX callback events, more info at https://github.com/defunkt/jquery-pjax#events!

Example:

$("body").on("click", ".menu li a", function() {
    $(document).on('pjax:end', function() {
        // Here comes the fade out animation
        $('#container').fade( function(){
           //Callback after animation has finished
        });
    });
});