jQuery animate() - multiple selectors and variables, a unique animate() call

Question

Hi guys,

I am resizing several divs in a loop with animate() in jQuery. At the same time I am moving (left property, no resizing at all) the div where they are contained.

Problem is, despite they have same duration the resize animate calls finish before the move call. They are out of sync. Is there any way of creating a list of selectors and its properties and then run a unique animate() call?

Or, is there any alternative to make multiple animations happen at the same time?

I've seen there's a property called step that happens every time animate loop happens but, again, each animate() call has it's own step call.

Thanks in advance :)

Here's a kind of pseudocode example as required:

for(...){
    $(target_x).stop().animate({property_a:random_value, property_b:random_value}, {duration:300});
    }
$(container).stop().animate({property_z:random_value}, {duration:300});

Answer 1

@ozke: So far it is tuff to suggest you some idea with out detail code. Still such case of multiple animation synchronization working smoothly all together, it would be better if you adjust the animation duration practically(trial and testing),i.e slower the outer and faster the inner animations...

Answer 2

Try changing the stop() to .delay(400)

Answer 3

Look into the animation queue and dequeue. Chain accordingly.

Answer 4

When asking something different but somehow related I found there was no solution to it.

The best workaround is using the step callback function as suggested here. Thanks to Nick Craver for the link.