Show Sibling Divs One at a Time - jQuery
<p>I have a set up of the following HTML</p>

<pre><code>&lt;div class="container"&gt;
    &lt;div class="box"&gt;Content&lt;/div&gt;
    &lt;div class="box"&gt;Content&lt;/div&gt;
    &lt;div class="box"&gt;Content&lt;/div&gt;
    &lt;div class="box"&gt;Content&lt;/div&gt;
    &lt;div class="box"&gt;Content&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>I would like to show one .box div at a time within the .container div. Fading in/out or sliding in/out would be preferred. Once the last .box div is shown it should fade to the first again. The number of .box divs could possibly vary. Sometimes there could be 2 and at others there could be 5. Also a slight delay of something like 3-4 seconds would be awesome.</p>

<p>I think this should be pretty straight forward with jQuery but I haven't yet found the solution I am looking for. Also I cannot use any plug-ins. Thanks in advance for any help.</p>
