【发布时间】：2017-05-07 12:35:57
【问题描述】：
使用 jQuery（如果需要 CSS3），如何创建一个步骤之间平滑过渡的多步骤表单？
例如，如果我有一个这样的三步表格，我怎样才能使步骤之间的过渡平滑？
//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，我提出了这个问题，并从一开始就给出了答复，以帮助社区。无论如何，我按照您的要求编辑了问题。
-
回顾了我的反对意见 :) ...正如您可能理解的那样，您是否打算回答自己的问题并不重要，它需要正确书写。