jQuery animate queue: false not working to make animations simultaneous

Question

I've used the jQuery queue modifier to make animations happen simultaneously before, but for some reason I can't get it working this time.

The URL of the page in question is http://fretfast.com - when you click "notifications" at the top left, you'll see that first the bar expands sideways and then the "notifications" bar expands to fit it, and the same thing happens with the height animation.

Here is how I'm trying to do it:

n.animate({width: em2px(35)+'px'}, {queue: false, duration: speeds['fast']/1.5});
nc.animate({width: em2px(35)+'px'}, {queue: false, duration: speeds['fast']/1.5});

Where n is the variable for the "notifications" title bar and nc is the variable for the notification container that expands first. Any idea what's wrong?

Answer 1

You probably have Transition properties in your CSS, on the selector you are trying to animate. Took me forever to figure this out, but apparently, CSS Transitions force the animation to either lag, or happen after all other animations, can anyone clarify or confirm this?

Using jQuery animations and CSS animations together can be tricky, anyone have any insight into this? Tips?