提交表单 - 等待动画完成

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

动作（删除函数 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 .promise() 方法，该方法将等到动画完成然后提交。

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();来阻止提交