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

你可以使用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();

来阻止提交

Answer 3

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

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

Answer 4

我建议：

使用onsubmit上的<form>来捕捉按钮和回车键的提交。
通过返回false。
淡出完成后提交表格。

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/

提交表单 - 等到动画结束

4 个答案: