How to animate elements being loaded using jQuery load method

Question

I am using ajax to load a new form once the old form has been submitted. the code looks like below:

$(document).on('click', '.next', function() {
        if ($(this).hasClass('disabled')) {
            return false;
        }
        var toLoad = $(this).attr('href') + '#content';

        $('#main-container #content').transition({ 'x' : '-100%' , duration:700 } , function() {
           loadContent();     
        });
        // $('#main-container').animate({ 'opacity': 1 }, loadContent);
        window.location.hash = $(this).attr('href').substr(0, $(this).attr('href').length - 5);

        function loadContent() {
            $('#main-container').load(toLoad, '', showNewContent())
        }

        function showNewContent() {
            $('#main-container').show('normal');
        }
        return false;
    });

    /* enable next button */

    $(document).on('change', '[type="radio"]', function() {
        var checked_no = $('[type="radio"]:checked').length;
        if (checked_no > 0) {
            $('.btn-next').removeClass('disabled');
        }
    });

DEMO HERE

Now i would like to have a transition animation , when the 1st form is submitted it slides to the left and from the right the new slide comes in , just like in a normal slider caousel.

When the 1st form is submitted i managed to get a animation for it to slide to the left and it exactly what i want , i used a plugin transit.js and just used the below lines of code to acheive the transition:

$('#main-container #content').transition({ 'x' : '-100%' , duration:700 } , function() {
           loadContent();     
        });

but now how to i transition the content being loaded ? as of now it just loads using the load function and thats quite lame , i understand that the difficulty level to do this next animation is slightly higher and i am unable to think of a way to get this content to load with an animation(An animation that slides in from the right).

So how exactly do i animate content being loaded using the load jQuery method and transit.js ??

Answer 1

Here's my suggestion in 4 steps:

1. Slide $('#main-container') to the left
2. Instantly reposition $('#main-container') on the right
3. Load the new content into $('#main-container')
4. Slide $('#main-container') to center

The code looks like this

$('#main-container').transition({ 'x' : '-100%' , duration:700 } , function() {
    $('#main-container').css('x','100%');
    loadContent();
});

function loadContent() {
    $('#main-container').load(toLoad, '', showNewContent())
}

function showNewContent() {
    $('#main-container').show('normal');
    $('#main-container').transition({ 'x' : '0' , duration:700 });
}