What is a good approach to synchronizing JQuery Animations?

Question

As I currently understand $("#someElement").animate() it will execute asynchronously relative to any other JavaScript statements. For instance:

$("#anotherElement").css("display", "none");

$("#someElement").animate(); 

//Setting the CSS display may fire AFTER the animation takes place.

If I am correct in my understanding of how animations work, how do I:

1. Make the animations run synchronously with the rest of my code?
2. If I have animations that I'd like to order that affect different elements how do I synchronize them to run in a given order?

Thanks for the help.

Answer 1

1. No, you can not run animation synchronously (callbacks only).
2. Use callbacks for this behaviour.

Sample:

$('#elem1').animate(params, function () {
    $('#elem2').animate(params, function () {/* ...other elements */});
});