0

<div>我有一个登录名并在shouldfadeOut()和 another上提交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>
4

4 回答 4

2

你必须告诉 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();
    });
});
于 2013-06-26T22:37:49.883 回答
1

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

于 2013-06-26T22:37:04.933 回答
1

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

function xSubmit(){
    $('#login').fadeOut(800, function() {
        $('#logo').fadeIn(1500);
    });
}
于 2013-06-26T22:37:43.053 回答
1

我建议：

  1. 使用onsubmit您<form>的按钮和回车键捕获提交。
  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/

于 2013-06-26T22:47:10.077 回答