Animating multiple elements using step callback (is it recommended?)
I was just looking through the jQuery docs and noticed that animate has a "step" callback option. Is it recommended to use the callback to animate several elements at once? For instance, assume I had 100 DIV tags, the following would produce a noticeable dragging/lagging tail when animating:
$("div").css({left:"0"}).animate({left:"70%"},{duration:500});
But if you use the step callback, to animate them at the same time, they stay in a uniform column (no stragglers) because they're all being acted upon at the same time. Something like:
var divs = $("div");
var stepTogether = function(step){
divs.css({left:step+"%"});
};
$("<div></div>").css({left:0}).animate({left:70},{duration:500,step:stepTogether});
I haven't seen this technique used and I haven't seen any discussions about it. I did a quick test locally and it seems to work. Am I missing something? Is there some hidden caveat, some reason to not use this? Is there a better way to animate several elements at once... like without creating a $("<div></div>) that never gets appended?
Brian.