如何使用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. 幻燈片$（ '＃主容器'）向左
2. 立即重新$（ '＃主容器'）加載新的內容爲$（「＃主容器」）
3. 幻燈片$（「＃主容器」）到中心

的代碼看起來像這樣

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