Ben's Sandbox
  • Projects
  • Tags

jQuery Animation - Multiple Elements Simultaneously


View Blog   View Source  
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.
Read more about this demo on my blog post - Animating Multiple Elements Simultaneously with jQuery


© Ben Olson 2012 with help from Jekyll Bootstrap and Twitter Bootstrap