jQuery Fade Effects и вход в Ajax

Question

Я использую следующий фрагмент кода для входа пользователя через 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;
  });

Моя проблема в том, что мой запрос обрабатывается так быстро, что эффекты затухания накладываются друг на друга, и я просто застрял с «Загрузка», даже если запрос возвращает некоторые данные для отображения. Я делаю это неправильно?

Я не могу использовать jQuery ajaxStart и ajaxStart, потому что я использую другие формы ajax на своем сайте и не хочу, чтобы они вызывали «Загрузка»

Спасибо за ваше время

Answer 1

Попробуйте это:

  //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 вашего примера кода). Если я не ошибаюсь, это должно гарантировать более элегантное сцепление этих анимационных эффектов.