Question

我正在使用jquery.multipage.js脚本创建一个包含5个问题的webform，这些问题在最后一个问题上提交数据。默认情况下，问题之间的转换是淡入淡出/淡出，但客户已决定它希望转换从左向右滑动。

可以在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);
       }

   }
});

修改jquery.multipage.js以进行从左到右的转换

1 个答案: