延迟提交页面的更改-jQuery [英] Delay page change on Submit - jQuery

问题描述

标题

    $(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秒钟，以使动画有时间完成.但仅当单击提交"按钮时.如何延迟页面播放动画的时间?

As you can see, I've made it do when submit is clicked, the user_box animates back to 0pxs (slides right). Problem is I need to delay the page load by about 1 second to give the animation time to finish. But only when the Submit button is clicked. How can I delay the page to allow the animation to finish?

我已经尝试过了.

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

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

with no joy. Any help would be greatly appreciated. Thank you.

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

p.s. The general idea is the user_box slides right with each query and return left with result. It'll be mainly PHP, hence the on page load it slide right to left. I'll wangle something later to stop it happening when logged in or something.

推荐答案

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

The most reliable and flexible way to do this is to use the complete callback option on the $().animate call:

$('#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.您不应给表单元素命名表单属性.

Note that I've changed the id of the submit button. You should not give form elements the name of form properties.

有关更多选项，请参见jQuery $().animate() API: http://api.jquery.com/animate/

See the jQuery $().animate() API for more options: http://api.jquery.com/animate/

这篇关于延迟提交页面的更改-jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！