Question

标题

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

没有快乐。任何帮助将不胜感激。谢谢。

P.S。一般的想法是user_box向右滑动每个查询并返回结果。它主要是PHP，因此页面加载它从右向左滑动。我会稍后讨好一些东西，以便在登录时阻止它发生。

Answer 1

最可靠，最灵活的方法是在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/

Answer 2

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

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

Answer 3

我认为最好使用.submit（fnc）然后再点击.click - 如果还要输入
使用event.preventDefault（），然后在动画完成时自行提交

提交延迟页面更改 - jQuery

3 个答案: