jQuery fade effects et Ajax login

Question

J'utilise le morceau de code suivant pour me connecter à un utilisateur via Ajax.

//Capture the login_ajax form 
    $("#login_ajax").submit(function() { 
    //First we fade out the header-login div 
    $("#header-login").fadeOut('fast', function() { 
     $(this).html("Loading").fadeIn('fast'); //Fade in loaading 
    }); 
    $.post("db/login.php", 
      { username: $("#username").val(), password: $("#password").val() }, 
      function(data) { 
      $("#header-login").fadeOut('fast', function() { //Fade out loading 
       $(this).html(data).fadeIn('fast'); //Fade in data 
      }); 
      }); 
    return false; 
    }); 

Mon problème est, parce que ma demande est en cours de traitement si rapide, les effets de fondu se chevauchent eachother et je ne suis coincé avec « Loading », même si la demande retourne des données à afficher. Est-ce que je fais cela mal?

Je ne peux pas utiliser ajaxStart et ajaxStart jQuery parce que j'utiliser d'autres formes de ajax sur mon site et je ne veux pas qu'ils déclenchent la « Chargement »

Merci pour votre temps

Answer 1

Essayez ceci:

//Capture the login_ajax form 
    $("#login_ajax").submit(function() { 
    //First we fade out the header-login div 
    $("#header-login").fadeOut('fast', function() { 
     $(this).html("Loading").fadeIn('fast'); //Fade in loaading 
    }); 
    $.post("db/login.php", 
      { username: $("#username").val(), password: $("#password").val() }, 
      function(data) { 
      $("#header-login").stop().fadeOut('fast', function() { //Fade out loading 
       $(this).html(data).fadeIn('fast'); //Fade in data 
      }); 
      }); 
    return false; 
    }); 

Lorsque vous appelez .stop(), callbacks ne sont pas lancés, cela empêchera la .html("Loading") de tir après. See here for a full read.

Answer 2

Vous pouvez essayer de poster le formulaire dans le rappel de la première méthode fadeIn (ligne 5 de votre exemple de code). Si je ne me trompe pas, cela devrait garantir un enchaînement plus élégant de ces effets d'animation.