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")之后触发。 See here for a full read

Answer 2

您可以尝试在第一个fadeIn方法的回调中发布表单（代码示例的第5行）。如果我没有弄错的话，那应该可以保证这些动画效果更加优雅。

jQuery淡入淡出效果和Ajax登录

2 个答案: