How to force jQuery animations to run simultaneously?

Question

I have a web page with animations (JQuery Animation) all over the place. A typical animation sequence may contain three or four objects animating independently at the same time. The issue I am facing is that the queuing of the animations is not predictable. Some of the animations are running simultaneously while some others are not.

I am doing something like

   setTimeout(function(){
       //animations
    }, delay);

in many places just to try and group the animations. Even when using this, some of the animations inside the code block are not running simultaneously.

Is there any way to force animations to be run at the same time? Is there a way to fill up the queue with animations and then execute these at the same time? Is there any comprehensive documentation of how this thing actually works?

EDIT: Sample code Warning: The code is messy

The question is looking at the code how do you know which of the animations are going to run simultaneously?

Answer 1

This run simultaneously (but not if there's already an ongoing animation on the object):

 $('.blabla .2').animate({opacity: 0.3, fontSize: 20}, 800);

And if you want to be 100% sure that it's animated right away (notice the queue:false):

$('.blabla .1').animate({fontSize: 20},{queue:false,duration:800});

You can also do this. (It will still run simultaneously)

$('.blabla .1')
   .animate({fontSize: 20},{queue:false,duration:800})
   .animate({opacity: 0.4},{queue:false,duration:800});

This runs one after the other.

$('.blabla .1').animate({opacity: 0.3}, 800).animate({fontSize: 20}, 800);

So does this

$('.blabla .2').animate({opacity: 0.3}, 800, function() {
    $('.blabla .3').animate({opacity: 0.3}, 800);
});

I hope that answers your question.

Sorry for all the edits, i'm new here.

Answer 2

Use the step option. You give it a function, and after each step of the current animation, it will execute that function. Thus you can animate there. Link to docs.