javascript - フォームに入力してから左にスライドすると、jquery で別のフォームが表示されます

Question

私は3つのフォームを持っています。それぞれ分けて紹介したいと思います。ユーザーに入力させ、完成したフォームを左にスライドさせてから、進行中のフォームを表示します。

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

これを実現するにはどうすればよいですか？

これは、私が使用しようとしたフィドルです。

ご協力ありがとうございました。

Answer 1

「ウィザード」と呼ばれるクラスを持つようにdivを変更しました（それがあなたがやろうとしていることを見る方法だからです）あなたが望むようにそれを変更することができます.

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