Javascript animating several DIV's in a sequence
<p>I want to animate div sequentially, but can not understand how to go about it, this is my code which want to animate</p>

<pre><code>&lt;div id="project_container"&gt;
    &lt;div class="project_box"&gt;
        &lt;img src="images/project.jpg"&gt;
    &lt;/div&gt;
    &lt;div class="project_box"&gt;
        &lt;img src="images/project1.jpg"&gt;
    &lt;/div&gt;
    &lt;div class="project_box"&gt;
        &lt;img src="images/project2.jpg"&gt;
    &lt;/div&gt;
    &lt;div class="project_box"&gt;
        &lt;img src="images/project3.jpg"&gt;
    &lt;/div&gt;
    &lt;div class="project_box"&gt;
        &lt;img src="images/project4.jpg"&gt;
    &lt;/div&gt;
    &lt;div class="project_box"&gt;
        &lt;img src="images/project5.jpg"&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Here we have similar type of 6 div, which name . When animation start first div animate and other 5 div hide and when first div animation complete, second div start animate and next 4 div hide, similarly when second div complete animation, third div start these animation continue when last div animation complete.</p>
