1
jQuery（およびCSS3が必要な場合）を使用して、ステップ間のスムーズなトランジションでマルチステップフォームを作成するにはどうすればよいですか？ステップ間のスムーズなトランジションでマルチステップフォームを作成するにはどうすればよいですか？
たとえば、このような3つのステップのフォームがある場合、ステップ間の遷移をスムーズにするにはどうすればよいですか？すなわち、各フォーム工程divためjQueryの方法.show(speed)と.hide(speed)のパラメータを使用して達成する
//shows #form_part{n} and hides the other parts
function shows_form_part(n){
var i = 1, p = $("#form_part"+(i).toString());
while (p.length != 0){
if (i == n){
p.show();
}
else{
p.hide();
}
i++;
p = $("#form_part"+(i).toString());
}
}
//change accordingly, just an example
function submit_form() {
var sum = Number($("#num1").val()) +
Number($("#num2").val()) +
Number($("#num3").val());
alert("The sum result is: " + sum);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body onload="shows_form_part(1)">
<form>
<div id="form_part1">
Part 1<br>
<input type="number" value="1" id="num1"><br>
<!--form elements 1-->
<button type="button" onclick="shows_form_part(2)">»</button>
</div>
<div id="form_part2">
Part 2<br>
<input type="number" value="2" id="num2"><br>
<!--form elements 2-->
<button type="button" onclick="shows_form_part(1)">«</button>
<button type="button" onclick="shows_form_part(3)">»</button>
</div>
<div id="form_part3">
Part 3<br>
<!--form elements 3-->
<input type="number" value="3" id="num3"><br>
<button type="button" onclick="shows_form_part(2)">«</button>
<button type="button" onclick="submit_form()">Sum</button>
</div>
</form>
</body>
@LGSon、私は質問をしたし、私は右の初めからの返信を与えました、コミュニティを支援するためにいずれにしても、あなたが紹介したように質問を編集しました。 –
私のdownvotesを思いついた:) ...あなたがおそらく理解したように、あなた自身の質問に答えるつもりなら、問題はない。 – LGSon