Задержка изменения страницы на Submit - JQuery

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 callbac к опции на $().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

1. Я думаю, что лучше использовать .submit (FNC), а затем .click - должны работать AFAIK также на Enter
2. используйте event.preventDefault(), а затем представить его себе, когда анимация закончена