Is There Any Way To Make Two Jquery Animations Run (properly) Simultaneously?

I have an event listener that calls two animation actions. Unfortunately their starts are staggered by a small amount (e.g. the first in the function starts first). Does anyone kno

Solution 1:

There was a recent disussion about this exact topic on the jQuery dev list. They created a few test cases you might wanna look at. Specially the Johns test.

Here's the discussion topic btw.

Solution 2:

The trick is to have a single interval/callback in which all elements are updated. You can find an example in my post here:

Can I implement a callback with each animation step in jQuery?

What you end up is basically:

var el1 = $("#element1");
var el2 = $("#element2");

var animation = newAnimationTimeline( {
    easing: "swing"
  , onstep: function( stepValue, animprops )
    {
      // This is called for every animation frame. Set the elements:
      el1.css( { left: ..., top: ... } );
      el2.css( { left: ..., top: ... } );
    }
  });

// And start it.
animation.start();