jQuery淡入淡出效果和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表单，不想让它们触发“正在加载”。

感谢您的时间。

- soren.qvist

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")在之后被触发。详细信息请参见此处。

- Nick Craver

Answer 2

您可以尝试在第一个fadeIn方法的回调函数中提交表单（代码示例的第5行）。如果我没记错的话，这应该能够保证更优雅的动画效果链接。

- Çağdaş Tekin