retarder le changement de page sur Submit - jQuery

Question

tête

$(document).ready(function() { 
     $('#user_box').animate({width: "263px"}, "slow"); 

     $('#submit').click(function(){ 
      $('#user_box').animate({width: "0px"}, "slow"); 
     }); 
    }); 

Contenu

  <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> 

Comme vous pouvez le voir, je l'ai fait faire quand soumettons est cliqué, le user_box anime Retour à 0pxs (diapositives droite). Le problème est que j'ai besoin de retarder le chargement de la page d'environ 1 seconde pour donner à l'animation le temps de finir. Mais seulement lorsque le bouton Soumettre est cliqué. Comment puis-je retarder la page pour permettre à l'animation de se terminer?

J'ai essayé ..

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

sans joie. Toute aide serait grandement appréciée. Je vous remercie.

p.s. L'idée générale est la diapositive de l'utilisateur droite à chaque requête et retour à gauche avec le résultat. Ce sera principalement PHP, d'où le chargement de la page sur la diapositive de droite à gauche. J'arrangerai quelque chose plus tard pour l'arrêter quand je serai connecté ou quelque chose.

Answer 1

le moyen le plus fiable et flexible pour le faire est d'utiliser le complete callbac option k sur l'appel $().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(); 
      } 
     } 
    ); 
}); 

Notez que j'ai changé le id du bouton soumettre. Vous ne devez pas donner aux éléments de formulaire le nom des propriétés de formulaire.

Voir l'API jQuery $().animate() pour plus d'options: http://api.jquery.com/animate/

Answer 2

Vous devriez probablement utiliser AJAX pour ce genre de chose, mais si vous voulez vraiment:

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

Answer 3

1. je pense qu'il est préférable d'utiliser .submit (FNC) puis .cliquez - devrait fonctionner aussi afaik sur Entrée
2. utilisez event.preventDefault(), puis le soumettre par vous-même lorsque l'animation est terminée