1

ヘッダ

    $(document).ready(function() {
        $('#user_box').animate({width: "263px"}, "slow");

        $('#submit').click(function(){
            $('#user_box').animate({width: "0px"}, "slow");
        });
    });

コンテンツ

            <div id="user_box">
                <form name="login_form" id="login_form" method="post" action="index.php">
                    Username:<br />
                    <input type="text" name="username"><br />
                    <input type="submit" value="Submit" id="submit" />
                </form>
            </div>

ご覧のとおり、submit がクリックされると、user_box がアニメーションで 0pxs に戻るようにしました (右スライド)。問題は、アニメーションが終了する時間を与えるために、ページの読み込みを約 1 秒遅らせる必要があることです。ただし、送信ボタンがクリックされた場合のみ。ページを遅らせてアニメーションを終了させるにはどうすればよいですか?

私はもう試した..

        $('#submit').delay(3500, function(){
            window.location = toLoad;
        });

喜びもなく。どんな助けでも大歓迎です。ありがとうございました。

ps 一般的な考え方は、user_box が各クエリで右にスライドし、結果を左に返すことです。これは主に PHP になるため、ページの読み込み時に右から左にスライドします。後で何かをぶらぶらして、ログインしたときにそれが起こらないようにします。

4

3 に答える 3

2

これを行うための最も信頼性が高く柔軟な方法は、呼び出しでコールバック オプションを使用することですcomplete。$().animate

$('#btn_submit').click(function(e){
    $submit = $(this);

    e.preventDefault(); // prevent the form from being submitted until we say so

    $('#user_box').animate(
        { width: "0px" },
        {
            duration: "slow",
            complete: function(){ //callback when animation is complete
                $submit.parents('form').submit();
            }
        }
    );
});

id送信ボタンの を変更したことに注意してください。フォーム要素にフォーム プロパティの名前を付けるべきではありません。

$().animate()その他のオプションについては、jQuery API を参照してください: http://api.jquery.com/animate/

于 2010-09-18T11:28:03.203 に答える
0

おそらく、このタイプのものには AJAX を使用する必要がありますが、本当に必要な場合は次のようにします。

document.getElementById('submit').addEventListener('click', function(e) {
    e.preventDefault();
    setTimeout(function() {
        document.getElementById('login_form').submit();
    }, 3500);
}, false);
于 2010-09-18T10:51:39.850 に答える
0
  1. .submit(fnc) を使用してから .click を使用する方が良いと思います-入力時にも動作するはずです
  2. event.preventDefault() を使用し、アニメーションが終了したら自分で送信します
于 2010-09-18T10:53:15.680 に答える