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) ...
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();
});
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.
source to share