javascript - 如何使用 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');
        }
    });

DEMO HERE

现在我想要一个过渡动画，当第一个表单被提交时，它向左滑动，新幻灯片从右边进入，就像在普通的 slider 轮播中一样。

当提交第一个表单时，我设法让它向左滑动动画，这正是我想要的，我使用了一个插件 transit.js 并使用下面的代码行来实现转换:

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

但现在我如何转换正在加载的内容？截至目前，它只是使用加载功能加载，这很蹩脚，我知道做下一个动画的难度级别略高，我无法想出一种方法来让这个内容加载动画(动画从右侧滑入)。

那么我究竟如何使用 load 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 });
}