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>

正如你所看到的，当点击提交时，我已经做到了，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了提交按钮。您不应该为表单元素指定表单属性的名称。

有关更多选项，请参阅 jQuery $().animate()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 - afaik 在 Enter 时也应该工作
  2. 使用 event.preventDefault() 等动画完成后自行提交
于 2010-09-18T10:53:15.680 回答