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，只是使用下面的代码行来实现转换：< / p>

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

但现在如何转换正在加载的内容？截至目前它只是加载使用加载功能，这是非常蹩脚，我明白，下一个动画的难度级别略高，我无法想办法让这个内容加载动画（一个动画）从右边滑入）。

那么我是如何使用load jQuery方法和transit.js动画加载内容的呢？

Answer 1

以下是我的建议：

向左边滑动$（＆＃39;＃main-container＆＃39;）
立即重新定位右边的$（＆＃39;＃main-container＆＃39;）
将新内容加载到$（＆＃39;＃main-container＆＃39;）
将$（＆＃39;＃main-container＆＃39;）滑动到中心

代码看起来像这样

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

如何使用jQuery加载方法为正在加载的元素设置动画

1 个答案: