How to animate 6 boxes incrementally?
<p>Here is my html...</p>

<pre><code>        &lt;div class="project"&gt;
            &lt;div class="box"&gt;

            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="project"&gt;
            &lt;div class="box"&gt;

            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="project"&gt;
            &lt;div class="box"&gt;

            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="project"&gt;
            &lt;div class="box"&gt;

            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="project"&gt;
            &lt;div class="box"&gt;

            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="project"&gt;
            &lt;div class="box"&gt;

            &lt;/div&gt;
        &lt;/div&gt;
</code></pre>

<p>Here is my javascript...</p>

<pre><code>$('.box').each(function(){
            $(this).animate({
                width: 300,
                height: 200,
                top: 0,
                left: 0
            }, 500);
        });
</code></pre>

<p>I want each box to animate in one after the other. I can do this specifically, but the code is really long with all the callbacks. Wondering how I can loop through them correctly?</p>
