每个事件都有一个标志,最初是错误的。挂钩有问题的两个事件(transitionEnd
和 ajaxsuccess
,听起来像)。每个事件设置它的标志并调用一个函数。该函数检查标志:如果两者都设置,它会做一些事情。
这是一个使用animate
CSS 过渡而不是 CSS 过渡的示例,只是为了简单起见:Live example | 资源
jQuery(function($) {
$("#theButton").click(function() {
this.style.display = "none";
$("#box, #content").show();
doTheStuff();
});
function doTheStuff() {
var ajaxDone = false,
ajaxFailed = false,
animationDone = false;
display("Triggering ajax and animation");
$.ajax({
url: "http://jsbin.com/ibebiv",
method: "GET",
success: function(data) {
$("#content").append(data);
display("ajax done");
ajaxDone = true;
checkDone();
},
error: function() {
ajaxFailed = true;
checkDone();
}
});
$("#box").animate({
left: "+200px"
}, function() {
display("animation done");
animationDone = true;
checkDone();
});
function checkDone() {
if ((ajaxDone || ajaxFailed) && animationFlag) {
display("<strong>All done</strong>");
}
}
}
function display(msg) {
$("<p>").html(msg).appendTo("#content");
}
});
注意错误处理,以防 ajax 调用失败。