jQuery Animation - Multiple Elements Simultaneously
A quick test to double-check elements will animate the way I expect. This demo shows how to animate multiple items both iteratively
with different end-points and in one animate() call to animate everything to the same end-point.
My concern is that trying to animate several elements at once
would result in timing issues. However, because of the single threaded nature of Javascript, the animations won't start until
the event handler has finished executing. You can rely on this "feature" to setup all your animations knowing that they will execute
properly relative to the timing you specify. The only caveat being that if you take too long to get things running, you risk the
animations not running at all.
- Synchronized - All the elements will animate outward synchronously and then return back to the start position
- Staggered? - Attempt to desynchronize the animation via a for loop placed after each animate call on each element. All this will do is cause the animation to skip forward.
- Staggered! - Using delay() before each animate is works very nicely to stagger the animations.