JQuery: Waiting for Multiple Animations to Complete June 9th, 2009
Have you ever come across a situation where you wanted to execute a certain piece of code after an animation has completed running? This is a very common use-case in modern web development. jQuery team knows it, and that is why they accept a callback function as argument for every kind of animation call. In the example below, we pass in a callback function that will be executed after the “slideDown” animation is complete. This is the usual scenario.
$("#animateMe").slideDown(function() {
// This piece of code will be executed
// after the animation is complete
});
But, in many other scenarios you might want to wait for multiple animations to complete before executing a certain piece of code. Lets assume that the two elements – “#element1″ and “#element2″ – are currently getting animated. Our goal is to execute a piece of code after both elements are finished with their respective animations. This is where it gets tricky. I was facing one such challenge today. The solution I have arrived at is to use the “:animated” pseudo-selector and “setInterval” to repeatedly check and wait until the animations have completed running. An example will clarify what I mean
var wait = setInterval(function() {
if( !$("#element1, #element2").is(":animated") ) {
clearInterval(wait);
// This piece of code will be executed
// after element1 and element2 is complete.
}
}, 200);
In the example above, I use “setInterval” to repeatedly check if these two elements are NOT being “:animated”. If this condition is not met, then it means that atleast one of them is still getting animated. So, “setInterval” will check for the same condition again in 200 ms until the condition is met. If the condition is met, it means that the animations are complete. So, I immediately do a “clearInterval” and stop checking for this condition again. Any code written after this statement will get executed after both the animations are complete.
Ofcourse, the same code can be modified for more than two elements as well. Some more work, and we can make it handle any number of elements. But, I was wondering if there was an easier, better and more efficient approach to solve the same challenge. If fellow jquery lovers are aware of such solutions please feel free to leave a comment.
Pretty cool technique. Seemed a little innefficient but after trying out the callback version of this challenge, I think yours wins.
Callback method:
function allDone(){
// This piece of code will be executed
// after element1 and element2 is complete.
}
function callbackTrack(d){
callbackTrack.queue = callbackTrack.queue || [false];
if (d === ‘done’){
if(callbackTrack.queue.shift() && callbackTrack.queue.length == 1) allDone();
return;
}
callbackTrack.queue.push(true);
return function(){ callbackTrack(’done’); }
}
$(”#element1″).slideDown(500,callbackTrack());
$(”#element2″).slideDown(700,callbackTrack());
@Paul Irish – The technique you have posted looks nice too. I will give it a try.
IT is one of the best and most leading technology in this modern era. There are many different ways to get high level posts in any famous organization. In order to get a good post in Information Technology, you must have detailed knowledge and experience about different topics like test king. I really appreciate the best and amazing efforts like that. Well done..
Ofcourse, the same code can be modified for more than two elements as well. Some more work, and we can make it handle any number of elements. thanks
Ofcourse, the same code can be modified for more than two elements as well. Some more work, and we can make it handle any number of elements. But, I was wondering if there was an easier, better and more efficient approach to solve the same challenge. If fellow jquery lovers are aware of such solutions please feel free to leave a comment.
AJAX and PHP is a great resource for PHP developers who want to expand their knowledge into front end web languages.But here I got some practical stuff!see…nobody so kind like you dude!Thanks for all information!