jQuery ajax, wait until beforeSend animation finishes
HTML & CSS:
<a href="#">link</a>
<img src="http://2.bp.blogspot.com/_OIHTbzY7a8I/TOaiTKLqszI/AAAAAAAAAHM/eb3iiOqxzKg/s640/Auto_Audi_Audi_concept_car_005130_.jpg" />
<div></div>
img { display: none; }
a { display: block; }
JS:
$("a").click(function(){
$.ajax({
url: "test.php",
contentType: "html",
beforeSend: function(){
$("img").fadeIn(600, function(){
$("div").append(" | beforeSend finished | ");
});
},
error: function(){
$("div").append(" | error | ");
}
});
return false
});
The problem is, error
function starts, before animation in beforeSend
function finishes.
Here is working example http开发者_JS百科://jsfiddle.net/H4Jtk/2/
error
should begin to work only when beforeSend
is finished. How to do this?
I use beforeSend
function to start animation of the blocks when ajax starts. I can't remove it.
Thanks.
You can use a custom event to wait until the animation is complete, like this:
$("a").click(function(){
var img = $("img"),
div = $("div");
$.ajax({
url: "test.php",
contentType: "html",
beforeSend: function(){
img.fadeIn(600, function(){
div.append(" | beforeSend finished | ");
div.trigger("animationComplete");
});
},
error: function(){
if(img.is(':animated')) {
div.one("animationComplete", function() {
div.append(" | error | ");
});
} else {
div.append(" | error | ");
}
}
});
return false
});
Notes:
jQuery.one()
attaches an event handler that fires once and is then removed.jQuery.is(':animated')
is a custom selector provided by jQuery to determine if an element is animated using jQuery's built-in animation methods (egfadeIn
).
New jsFiddle: http://jsfiddle.net/pgjHx/
In the comments, Happy has asked how to handle multiple animations. One way would be to add a condition to the animationComplete
event handler to see if animation is ongoing. For example:
$("a").click(function(){
var img = $("img"),
div = $("div");
$.ajax({
url: "test.php",
contentType: "html",
beforeSend: function(){
img.fadeIn(600, function(){
div.append(" | beforeSend finished | ");
div.trigger("animationComplete");
});
// Add another animation just to demonstrate waiting for more than one animation
img.animate({
marginTop: '-=5',
opacity: '-=.5'
}, 700, function() {
div.trigger("animationComplete");
});
},
error: function(){
if(img.is(":animated")) {
// Note I've switched to bind, because it shouldn't be unbound
// until all animations complete
div.bind("animationComplete", function() {
if(img.is(":animated")) {
return;
}
div.append(" | error | ");
div.unbind("animationComplete");
});
} else {
div.append(" | error | ");
}
}
});
return false
});
you can do this
//run your animation on link click, and when animation gets completed, // then start your ajax request.
$("a").click(function () {
$("img").fadeIn(600, function () {
$("div").append(" | beforeSend finished | ");
$.ajax({
url: "test.php",
contentType: "html",
error: function () {
$("div").append(" | error | ");
}
});
return false
});
});
});
The thing is that "beforeSend" is finished - it will exit long before that "fadeIn" finishes. I don't know what you're trying to accomplish so it's hard to offer a solution. You'd have to wait to start the ajax operation until after the animation sequence (the "fadeIn") completes if you wanted to guarantee that to happen first.
精彩评论