Fade jQuery effects and Ajax input

Question

I use the following code snippet for user login through 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;
  });

My problem is that my request is being processed so fast, the fading effects overlap with each other, and I'm just stuck with "Download", even if the request returns some data to display. Am I doing it wrong?

I cannot use jQuery ajaxStart and ajaxStart because I use other forms of ajax on my site and do not want them to run Download

thank you for your time

Answer 1

Try the following:

  //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;
  });

.stop(), , .html("Loading") . .

Answer 2

fadeIn ( 5 ). , .