提交表格 - 等到動畫結束

Question

我有一個登錄名和<div>應該​​和另一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 .promise（）方法，將等到動畫然後完成做你的提交。

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

編輯：上淡出方法

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

或者使用回調 你可以從你的函數返回false防止形式submition

你也有選項，事件參數的功能時，您輸入

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

and prevent su bmition通過調用event.preventDefault();

Answer 2

您可以通過其他動畫作爲第一個1這樣的回調：

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

Answer 3

你要告訴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 4

我建議：

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/