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.

Answer 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.