Question

I am trying to create an animation of several elements opening and closing one after the other, but for some reason I did not succeed on that.

Here is a JsFiddle http://jsfiddle.net/NCYvC/.

The problem is all animations execute at the same time.

I hope I’m not making a stupid mistake somewhere.

Answer 1

The reson your code won’t work is due to you

1. executing the functions directly in the callback,
2. and you only using the m1 class name in your boxes.

Explonation:
1. When you use “functionName()” as a callback argument, you don’t wait for the callback to be run, but you run it as you enter it as argument. You need to only refer to the function by name, i.e. “functionName”.

Example:

$(".m1").slideDown("fast", functionName);

2.All your div-boxes had class m1. That means that the first function “runIt” would affect all of your divs, and that way look like they were executed all at the same time.

Updated fiddle code as an example: http://jsfiddle.net/mikaelbr/NCYvC/13/