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 に答える