Задержка смены страницы при отправке - jQuery - PullRequest
Новая
       11

Задержка смены страницы при отправке - jQuery

1 голос
/ 18 сентября 2010

Заголовок 

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

без радости. Любая помощь будет принята с благодарностью. Спасибо.

p.s. Общая идея заключается в том, что user_box скользит вправо при каждом запросе и возвращает влево с результатом. Это будет в основном PHP, следовательно, на странице загрузки он скользит справа налево. Я напишу что-нибудь позже, чтобы это не происходило при входе в систему или что-то в этом роде.

Ответы [ 3 ]

2 голосов
/ 18 сентября 2010

Самый надежный и гибкий способ сделать это - использовать опцию обратного вызова 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 кнопки отправки. Не следует давать элементам формы имя свойства формы.

См. API jQuery $().animate() для дополнительных опций: http://api.jquery.com/animate/

0 голосов
/ 18 сентября 2010
  1. Я думаю, что лучше использовать .submit (fnc), чем .click - должно работать afaik и при вводе
  2. Использовать event.preventDefault (), а затем отправить его самостоятельно после завершения анимации
0 голосов
/ 18 сентября 2010

Вы, вероятно, должны использовать AJAX для этого типа вещей, но если вы действительно хотите: 

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