提交时延迟页面更改 - jQuery答案

【问题标题】：Delay page change on Submit - jQuery提交时延迟页面更改 - jQuery
【发布时间】：2010-09-18 10:48:05
【问题描述】：

标题

    $(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;
        });

没有喜悦。任何帮助将不胜感激。谢谢。

附言一般的想法是 user_box 在每个查询中向右滑动，然后向左返回结果。它将主要是 PHP，因此页面加载它从右向左滑动。稍后我会在登录或其他情况下阻止它发生。

【问题讨论】：

标签： jquery load delay slide

【解决方案1】：

最可靠和最灵活的方法是在$().animate 调用上使用complete 回调选项：

$('#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/

【讨论】：

谢谢你，就像一个魅力。现在只需对动画下降的轻微形式进行排序。

【解决方案2】：

你可能应该使用 AJAX 来处理这类事情，但如果你真的想要：

document.getElementById('submit').addEventListener('click', function(e) {
    e.preventDefault();
    setTimeout(function() {
        document.getElementById('login_form').submit();
    }, 3500);
}, false);

【讨论】：

【解决方案3】：

我认为最好使用 .submit(fnc) 然后 .click - afaik 在 Enter 时也应该工作
使用 event.preventDefault() 等动画完成后自行提交

【讨论】：