修改从左到右过渡的jquery.multipage.js

Question

我正在使用jquery.multipage.js脚本创建一个包含5个问题的the表单，用于提交最后一个问题的数据。默认情况下，问题之间的转换是fadein/fadeout，但客户端已经决定希望转换从左向右滑动。

脚本可以在https://github.com/xoxco/jQuery-Multipage-Form中找到。表单中的问题需要使用fieldset标签进行结构化。

我已经缩小了代码中控制转换的部分，但我就是不能让它从左到右。

这就是代码。

    jQuery.fn.transitionPage = function(from,to) {

        if (settings.transitionFunction) {
            settings.transitionFunction(from,to);
        } else {
            $(from).fadeOut('fast',function(){$(to).fadeIn('fast');});
        }
        $(id + ' fieldset').removeClass('active');
        $(to).addClass('active');       
    }

在这方面的任何帮助都将非常感谢。

干杯

Answer 1

你可以传入一个自定义的转换函数，“from”和“to”是表单中的“页面”。在这里，我使用jQuery动画来执行转换，以使概念清晰，但可以通过使用CSS转换来改进。

这是一个相当快速和肮脏的版本，它让这个想法发挥作用：

http://jsfiddle.net/eJKQn/367/

$('#multipage').multipage({
   'transitionFunction': function(from,to){

       var w = $('#wrapper').width();
       if (!($(from).get(0).id == 'page1' && $(to).get(0).id == 'page1')) {
           $(from).css({'display':'block'}).animate({ left: +w }, 500);
           $(to).css({'display':'block', 'left': -w })
             .animate({ left: 0 }, 500);
       }

   }
});