Javascript 提交表单-等待动画完成

我在

上有一个登录名，提交时应该

fadeOut（）

和另一个

fadeIn（）

，但它不会等待动画完成

这是我的密码：

JavaScript:

function xSubmit(){
  $('#login').fadeOut(800);
  $('#logo').fadeIn(1500);
}

<div id='logo' style="display: none;">
  <img src="{{ STATIC_URL }}pics/pic.png">
</div>
<div id='login'>
  <form method="post" id='loginForm' action="{{ action_url }}" autocomplete="off">
   <table>
      <tr>
      </tr>
        <th>Benutzer:</th>
        <td><input type="text" id="username" name="username"></td>
      <tr>
        <th>Passwort:</th>
        <td><input type="password" id="password" name="password"><td>
      </tr>
      <tr>
        <td><input type="submit" value="Login" onclick="xSubmit();"></td>
        <td></td>
      </tr>
   </table>
  </form>
</div>

HTML:

function xSubmit(){
  $('#login').fadeOut(800);
  $('#logo').fadeIn(1500);
}

<div id='logo' style="display: none;">
  <img src="{{ STATIC_URL }}pics/pic.png">
</div>
<div id='login'>
  <form method="post" id='loginForm' action="{{ action_url }}" autocomplete="off">
   <table>
      <tr>
      </tr>
        <th>Benutzer:</th>
        <td><input type="text" id="username" name="username"></td>
      <tr>
        <th>Passwort:</th>
        <td><input type="password" id="password" name="password"><td>
      </tr>
      <tr>
        <td><input type="submit" value="Login" onclick="xSubmit();"></td>
        <td></td>
      </tr>
   </table>
  </form>
</div>

贝努策：
羊草：

您可以使用jQuery.promise（）方法，该方法将等待动画完成，然后执行提交

xSubmit(){
    $('#login').fadeOut(800).promise().done(function(){
      $("#loginForm").submit();
    });
    return false;
}

或使用淡出回调方法：

xSubmit(){
  $('#login').fadeOut(800, function(){
       $("#loginForm").submit();
  })
  return false;
}

编辑： 您可以通过从函数返回false来防止表单提交

此外，您还可以选择使用事件参数对输入进行操作

<input type="submit" value="Login" onclick="xSubmit(event);"/>

---

并通过调用

event.preventDefault（）防止提交
您可以使用jQuery.promise（）方法，该方法将等待动画完成，然后执行提交

xSubmit(){
    $('#login').fadeOut(800).promise().done(function(){
      $("#loginForm").submit();
    });
    return false;
}

或使用淡出回调方法：

xSubmit(){
  $('#login').fadeOut(800, function(){
       $("#loginForm").submit();
  })
  return false;
}

编辑：
您可以通过从函数返回false来防止表单提交

此外，您还可以选择使用事件参数对输入进行操作

<input type="submit" value="Login" onclick="xSubmit(event);"/>



并通过调用
event.preventDefault（）防止提交
您可以将其他动画作为第一个动画的回调传递，如下所示：

function xSubmit(){
    $('#login').fadeOut(800, function() {
        $('#logo').fadeIn(1500);
    });
}

您可以将其他动画作为第一个动画的回调传递，如下所示：

function xSubmit(){
    $('#login').fadeOut(800, function() {
        $('#logo').fadeIn(1500);
    });
}

您必须告诉jQuery一个已完成，然后启动另一个，如下所示：

function xSubmit(){
    $('#login').fadeOut(800, function() {
        $('#logo').fadeIn(1500);
    });
}

表格：

<input type="submit" value="Login" id="btnSubmit">

您必须告诉jQuery一个已完成，然后启动另一个，如下所示：

function xSubmit(){
    $('#login').fadeOut(800, function() {
        $('#logo').fadeIn(1500);
    });
}

表格：

<input type="submit" value="Login" id="btnSubmit">

我建议：

在
上使用
onsubmit
，通过按钮和enter键捕获提交内容
通过返回
false
防止表单提交
完成后提交表格
JS:

HTML:





下面是一个例子。

表单不能在JSFIDLE上正确提交，但您知道了。

我建议：

在
上使用
onsubmit
，通过按钮和enter键捕获提交内容
通过返回
false
防止表单提交
完成后提交表格
JS:

HTML:





下面是一个例子。

表单不能在JSFIDLE上正确提交，但您知道了。

你比我早6秒…：你比我早6秒…：顺便说一句，你的html是无效的
td
/
th
超出
tr
，…顺便说一句，您的html无效
td
/
th
已退出
tr
，…我尝试过：函数xSubmit（）{$（'login'）.fadeOut（800）；$（'logo'）.fadeIn（1500）.promise（）.done（函数（）{$（'loginForm'）.submit（）}）但不起作用。@user2457241出了什么问题？我的猜测是表单在jQuery完成它的工作之前提交。您需要防止这种情况，以便jQuery可以在表单准备好时提交表单。是的，我认为showdev绝对正确。我已经更新了我的答案。我尝试过：函数xSubmit（）{$（'login'）.fadeOut（800）；$（'logo'）.fadeIn（1500）.promise（）.done（函数（）{$（'loginForm'）.submit（））}但不起作用。@user2457241出了什么问题？我的猜测是表单在jQuery完成它的工作之前提交。您需要防止这种情况，以便jQuery可以在表单准备好时提交表单。是的，我认为showdev绝对正确。我已经更新了我的答案。你在使用jQuery吗？jQuery库是否已加载？还可以尝试将“$（document）.ready（function（）{”添加到code@user2457241出了什么问题？这会使元素一个接一个地淡出，但对表单提交没有任何作用。是否使用jQuery？是否加载了jQuery库？请尝试同时添加“$（document）.ready（function（）{”before和“}”之后code@user2457241出了什么问题？这将一个接一个地淡出元素，但对处理表单提交没有任何作用。@user2457241下次请尝试更清楚地了解您在问题中遇到的确切问题。@user2457241下次请尝试更清楚地了解您在问题中遇到的确切问题输入法。