Как анимировать элементы, загружаемые с использованием метода загрузки jQuery

Question

Я использую ajax для загрузки новой формы после отправки старой формы. код выглядит следующим образом:

$(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

Теперь я хотел бы иметь анимации перехода, когда первая форма представляется скользит влево и справа новый слайд приходит в , так же, как в обычном канюле.

Когда подана первая форма, мне удалось получить анимацию для ее скольжения влево, и именно то, что я хочу, я использовал плагин transit.js и просто использовал приведенные ниже строки кода для перехода к следующему:

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

, но теперь, как я могу загрузить загружаемый контент? на данный момент он просто загружается с использованием функции загрузки, и это довольно слабое, я понимаю, что уровень сложности для этой следующей анимации немного выше, и я не могу думать о способе загрузки этого контента с помощью анимации (анимация который скользит справа).

Итак, как именно я загружаю содержимое, загружаемое с использованием метода загрузки jQuery и transit.js ??

Answer 1

Вот мое предложение в 4 этапа:

1. Slide $ ('# главный-контейнер') в левой
2. Мгновенно переставить $ ('# главный-контейнер') справа
3. Загрузите новое содержание в $ («# основного контейнера»)
4. Slide $ («# основного контейнера») до центра

код выглядит следующим образом

$('#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 }); 
}