jQuery淡入淡出效果和Ajax登录

时间:2010-02-27 01:29:49

标签: jquery ajax fade

我正在使用以下代码通过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表单并且不希望它们触发“正在加载”

感谢您的时间

2 个答案:

答案 0 :(得分:3)

试试这个:

  //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

答案 1 :(得分:0)

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