Is there any way to make two jQuery animations run (properly) simultaneously?

Question

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 know a way to properly sync them up?

Here's my code:

$("#nav ul li a").hover( function(){ $(lastBlock).children("div").animate({width: "0px"}, { queue:false, duration:400, easing:"swing" }); $(this).children("div").animate({width: maxWidth+"px"}, { queue:false, duration:400, easing:"swing"}); lastBlock = this; } );

Because the first animation runs slightly before the second, it causes the overall width to become momentarily unequal, which looks a bit funky.

Ólafur Waage · Accepted Answer · 2009-03-26 20:49:10Z

6

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.

answered Mar 26, 2009 at 20:49

Ólafur Waage

70.2k22 gold badges147 silver badges199 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tom Wright Over a year ago

By way of a follow up: It's showing a lot of promise, but currently has a couple of problems.

Community · Accepted Answer · 2017-05-23 10:24:32Z

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 = new AnimationTimeline( { 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();

Collectives™ on Stack Overflow

Is there any way to make two jQuery animations run (properly) simultaneously?

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related