提交表单-等待动画完成

Question

我在<div>上登录并提交了fadeOut()和另一个fadeIn()，但它不会等待动画完成。

这是我的代码：

JavaScript:

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

HTML:

<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>

Answer 1

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

形式：

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

Action（删除函数xSubmit（）｛并添加以下内容：

$('#btnSubmit').click(function(e){
    e.preventDefault();
    $('#login').fadeOut(800, function() {
        $('#logo').fadeIn(1500, function(){
            $('#loginForm').submit();
    });
});

Answer 2

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

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

Answer 3

我建议：

1. 在<form>上使用onsubmit来捕获来自按钮和回车键的提交
2. 通过返回false阻止表单提交
3. 褪色完成后提交表格

JS:

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

HTML:

<form ... onsubmit="return xSubmit(this);">
<input type="submit" value="Login" />

下面是一个例子
表单在jsfiddle上提交不正确，但您已经明白了
http://jsfiddle.net/tYHs5/

Answer 4

您可以使用jQuery.procise（）方法，该方法将等到动画完成后再进行提交。

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

或者在fadeOut方法上使用回调：

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

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

此外，您还可以选择在输入上使用事件参数

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

并通过调用event.preventDefault(); 来防止提交