Grouping items and launch animation separately
I am trying to implement $ .groups ().
Basic idea: if I have one element that depends on another element, I will group them, and only when the other groups stop working, start the animation of this element.
I got it:
/* mini-plugin */
var groups = [];
$.fn.extend({
group: function (key, selector) {
if (key < groups.length) {
selector && groups[key].add(selector);
}
else if (key == groups.length) {
groups.push( $(this).add( (selector||this )) );
}
groups[key] && (function(){
while (groups[key].is(":animated"));
})();
return groups[key];
}
});
But it doesn't work the way I want (and I have no idea why!)
/* testing */
$("div").hide();
$("#div1").group(0).fadeIn(2000);
$.group(0, "#div2").fadeIn(3000);
$.group(0, "#div3").fadeIn(4000);
It should fadeIn on the first div in group (0), and when you're done animating, fadeIn on the second div in group (0) ...
I made an example here.
Thanks in advance.
jQuery already implements this for you! Pretty cool, right?
For queues of asynchronous operations like animations and ajax requests - jquery uses promises . Your code in your example in plain jQuery looks like this:
// calling `.promise` on an element returns a promise for when its animations are over
$("#div1").fadeIn(1000).promise().then(function(){
// .then chains promises, the code here only executes after the
// .fadeIn(1000) on #div1 is done
// returning a promise from a promise will wait for it when continuing
// a chain
return $("#div2").fadeIn(1000).promise();
}).then(function(){
// because of the return value, this only runs after div2 is done
// animating
return $("#div3").fadeIn(1000).promise();
});
Working violin
jQuery also lets you concatenate them with $.when
so you can wait for multiple values at once.
But why is my code not working?
You haven't defined static $.groups
. you just put it on a prototype. So the second and third lines of use do not work. Also, you have a loop while
that will end up running indefinitely as JS is single threaded in that context.