Question

我对此表单有疑问。这是我的jsFiddle file.

这是我的JS

(function($) {
    $.fn.formToWizard = function(options) {
        options = $.extend({
            submitButton: ""
        }, options);

        var element = this;

        var steps = $(element).find("fieldset");
        var count = steps.size();
        var submmitButtonName = "#" + options.submitButton;
        $(submmitButtonName).hide();

        // 2
        steps.each(function(i) {
            $(this).wrap("<div id='step" + i + "'></div>");
            $(this).append("<p id='step" + i + "commands'></p>");



            if (i == 0) {
                createNextButton(i);
                selectStep(i);
            }
            else if (i == count - 1) {
                $("#step" + i).hide();
                createPrevButton(i);
            }
            else {
                $("#step" + i).hide();
                createPrevButton(i);
                createNextButton(i);
            }
        });

        function createPrevButton(i) {
            var stepName = "step" + i;
            $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Prev'>Back</a>");

            $("#" + stepName + "Prev").bind("click", function(e) {
                $("#" + stepName).hide();
                $("#step" + (i - 1)).show(function() {
                    $('.slide').animate({
                        left: "0"
                    }, 500);
                });
                $(submmitButtonName).hide();
                selectStep(i - 1);
            });
        }

        function createNextButton(i) {
            var stepName = "step" + i;
            $("#" + stepName + "commands").append("<a href='#' id='" + stepName + "Next' class='next'>Next</a>");

            $("#" + stepName + "Next").bind("click", function(e) {
                $("#" + stepName).hide();
                $("#step" + (i + 1)).show(function() {
                    $('.slide').animate({
                        left: "0"
                    }, 500);
                });
                if (i + 2 == count) $(submmitButtonName).show();
                selectStep(i + 1);
            });
        }

        function selectStep(i) {
            $("#steps li").removeClass("current");
            $("#stepDesc" + i).addClass("current");
        }

    }
        })(jQuery);

    $("#SignupForm").formToWizard({ submitButton: 'SaveAccount' })

我想要它做的是从左侧滑入（从左到右）当我点击下一步当我点击“返回”时我想让它向左滑动（右边到左）。

我在做动画的地方

$（“＃step”+（i + 1））。show（function（）{ $（ '滑'）。动画（{ 左：“0” }，500）; }）;

当您选择一种类型然后再单击后，类似于8 Tracks的内容。

非常感谢！

Answer 1

要看到来自右边的东西，它实际上需要在那里！您的代码中缺少的是右侧的元素：

$("#" + stepName).animate({
    left: "100%"
}, 0);

这是jsFiddle：

http://jsfiddle.net/T8WRM/16/

如果您想要移动前一个元素，我会离开动画功能，这样做会删除.show（）和.hide以查看完整动作

编辑：

要清楚滑块的事情，它不会像这样工作，这意味着你应该把视图放在一边（大部分时间是通过在不同的z-index上绝对定位它们）并将它们全部移动到视图中或通过组合（上一个，下一个，当前）

Answer 2

看看你的例子。你正在以错误的方式解决这个问题。

看看8tracks上的标记。永远不会使用css或jQuery hidden制作3张幻灯片.hide()。它们是“隐藏的”，因为它们前面还有另一个div，因此它们对用户“隐藏”，但在技术上是可见的。

它们不是滑动单个“页面”，而是将所有3个页面作为一个单元滑动。但是，覆盖以前“隐藏”页面的div保持静态。

想象一下，你的表格页面是装配线上的3张纸，你正在向下看鹰眼。您一次只能看到一张纸（因为有一个分隔线阻挡了其他纸张）。如果要移动到下一页，请在装配线上按“下一步”。所有3个页面都向左移动一个插槽，您现在可以看到下一页。

jQuery多步表单动画问题

2 个答案: