如何為使用jQuery load方法加載的元素設置動畫

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

此處演示

現在，我想制作一個過渡動畫，當提交第一個表單時，它會向左滑動，新的幻燈片會從右側滑動進來，就像在普通滑塊中一樣。

提交第一種表單時，我設法獲得了一個動畫，使其可以向左滑動，並且恰好是我想要的，我使用了一個插件transit.js，並僅使用了以下幾行代碼來實現過渡：

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

但是現在我該如何過渡要加載的內容？ 截至目前，它只是使用加載功能進行加載，這相當la腳，我知道制作下一個動畫的難度級別略高，並且我無法想到一種方法來使該內容隨動畫一起加載（動畫從右側滑入）。

那么我如何使用加載jQuery方法和transit.js來為正在加載的內容制作動畫呢？

Answer 1

這是我的4個步驟的建議：

1. 向左滑動$（'＃main-container'）
2. 立即在右側重新定位$（'＃main-container'）
3. 將新內容加載到$（'＃main-container'）
4. 將$（'＃main-container'）滑動到中心

代碼看起來像這樣

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