jquery - jquery淡出内容

Question

我正在尝试淡出用户表单的一部分以加载下一个表单步骤（通过淡入）。但是当我点击提交时，它会提交表单，并且不会淡出。

<script type="text/javascript">
    function validate(input, name) {
        if( form['register'] = true ) {
            $("#step1").fadeOut("slow");
        }
    }

<form id="register" name="register" method="post" action="">
    <div id="step1" class="step1">
        form here...
        ...
        <input type="submit" 
               name="next" 
               id="next" 
               value="Continue" 
               disabled="disabled" />
    </div>

Answer 1

您需要阻止您的表单提交以允许您的淡入淡出：

查询：

$(document).ready(function() {
  $("form").submit(function(e) {
    e.preventDefault();
    $("#step1").fadeOut("slow");
  });
});

但作为建议，您应该使用按钮来允许用户在步骤之间来回导航，并且仅在最后一步使用提交按钮。

Answer 2

“但是当我点击提交时，它会提交表单，并且不会淡出。”

该行让我相信您希望在提交表单时隐藏 div。以下是你将如何去做：

//Select #register, bind a 'submit'-event.
$('#register').on('submit', function(e){

  //This next line will prevent the form from being submitted.
  e.preventDefault();

  //Fade out the #step1.
  $('#step1').fadeOut('slow');

});