JQuery each loop looping through one line of code x amount of times before even looking at the rest
<p>I have a loop in Jquery:</p>

<pre><code>var fadeTime=500;
css_id=0;
$.each(my_array, function (i, d_U) {
css_id++;
an_v=d_U[1];
an_d=d_U[4];

do_c_function("id_344",true,true);

$("#box_"+css_id).fadeIn(fadeTime,function(){

   //this stuff will happen once the fadein is complete

   $("#box_"+css_id).animate({top: '-50px'},fadeTime,function(){

       //this stuff will happen once the animate is complete

       alert("#box_"+css_id);//for debugging

    });//end of animation

  });//end of fadein

});//end of each loop
</code></pre>

<p>Now as you've probably noticed, I'm trying to make the loop animate different divs each time using the <code>css_id</code> variable and <code>++;</code> (add 1) to it each time the loop runs.</p>

<p>Thing is, <code>css_id</code> reaches a high value before any of the code below has even been executed once. So when its time to animate, Jquery will try to animate <code>#box_210</code> when its supposed to animate <code>#box_1</code>.</p>

<p>Is there any way to make it only execute the <code>css_id++;</code> line once, then the animate lines get executed, and only then again with the <code>css_id++;</code> line...and so on.</p>

<p>I've tried to put the <code>css_id++;</code> line in a call back with both the animations but that seems to not work as well.</p>

<p>Thanks</p>
