javascript - 填写表格，然后向左滑动以显示另一个与 jquery

Question

我有 3 个表格。我想分别展示每个。让用户填写，然后让完成的表单向左滑动，然后显示正在处理的表单。

$('.button-action').click(function() {
    $('.firstForm').animate({left: '-=150px'}, 500);
});

我将如何实现这一目标？

这是我尝试使用的小提琴。

感谢您的帮助。

Answer 1

我已经将 div 更改为有一个名为“wizard”的类（因为这是我看到你想要做的事情的方式）你可以随意改变它。

HTML

<div class="promo">
    <div class="wrapper">
        <div id="signup" class="wizard">
            <div class="heading">
                 <h1>Just need your email to get started</h1>

            </div>
            <ul>
                <li>
                    <input class="signup-email" type="text" placeholder="Email address" />
                </li>
                <li>
                    <button data-next-id="form1" validationDiv="signup" class="continue button button-action">Apply</button>
                </li>
            </ul>
        </div>
        <div id="form1" class="wizard">
             <h1>One more to go</h1>

            <input type="text" placeholder="First Name" />
            <input type="text" placeholder="Last Name" />
            <input type="text" placeholder="Country" />
            <button data-next-id="form2" validationDiv="form1" class="continue button button-action">One more</button>
        </div>
        <div id="form2" class="wizard">
             <h1>Last one</h1>

            <input type="text" class="input-text" placeholder="Company Name" />
            <button validationDiv="form2" class="button button-action">Done</button>
        </div>
    </div>
</div>

jQuery

$(".wizard").hide();
$("#signup").show();
$(".continue").click(function () {
    var valid = true;
    $("#" + $(this).attr("validationDiv")).find("input").each(function () {
        if ($(this).val() == "") valid = false;
    });
    if (valid) {
        $(".wizard").slideUp();
        $("#" + $(this).attr("data-next-id")).slideDown();
    }
});

JSFiddle