我正在使用以下代码通过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表单并且不希望它们触发“正在加载”
感谢您的时间
答案 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行)。如果我没有弄错的话,那应该可以保证这些动画效果更加优雅。