How to add fade in/out effect to pjax-standalone?

Question

I'm using PJAX-Standalone to load pages for a website, and I'd like to add fade out/in transitions when new content is loaded, however, I'm not sure how best to achieve this.

The PJAX documentation describes 'callbacks', is there a way to append a fade transition to one of these, so that existing content fades out while new content fades in? I'm jumping into this head first as a jQuery/Javascript noob, but I'm eager to learn, so any help/advice is much appreciated!

This is what I have included in my wrapper.php:

// PJAX links!
  pjax.connect({
    'container': 'content',
    'success': function(event){
      var url = (typeof event.data !== 'undefined') ? event.data.url : '';
      console.log("Successfully loaded "+ url);
    },
    'error': function(event){
      var url = (typeof event.data !== 'undefined') ? event.data.url : '';
      console.log("Could not load "+ url);
    },
    'ready': function(){
    console.log("PJAX loaded!");
    }
  });

Answer 1

Probably the easiest way to go about this is to just hide the container that wraps the #content div and then fade it in after the content is loaded. It will be a little harder to fade the content out and then fade the new content in and really you don't gain much by fading it out and the pjax container will load the content faster than you can fade it out so it will look silly to fade it out. Since you said in the comments below the question that you can use jquery I will just use that because it the easiest. So what I would do is wrap your content that you want to fade in with a container and give it an id of #content-container. If you are using a markup similar to the markup on the github page you can use something like the following:

<div id='content-container>
    <div class='container'>
        <div id='content' class='col-sm-8'>
            <?php echo $contents; ?>            
        </div>
        <div class='col-sm-4'>
            ... sidebar stuff ...
        </div>
    </div>
    <footer>
        ... footer stuff ...
    </footer>
</div>

And your javascript and jquery code will look like:

    // PJAX links!
    pjax.connect({
        'container': 'content',
        'success': function(event){
            var url = (typeof event.data !== 'undefined') ? event.data.url : '';
            console.log("Successfully loaded "+ url);
        },
        'error': function(event){
            var url = (typeof event.data !== 'undefined') ? event.data.url : '';
            console.log("Could not load "+ url);
        },
        'ready': function(){
            console.log("PJAX loaded!");
        },
        'beforeSend': function(e){
            $('#content-container').hide();
        },
        'complete': function(e){
            $('#content-container').fadeIn(1000);
        }
    });

So what is happening is we are hiding the #content-container on pjax beforeSend then fading it back in on pjax complete like it says in the callbacks section of the documentation. You can control the speed at which it fades in by changing the number where it says .fadeIn(1000) changing it to say 800 will make it faster.

Anyway hope this wasn't too confusing if you have any questions hit me up in the comments below.