jQuery looping animation from the beginning
<p>I would like this animation to repeat from the very beginning each time (#slide1).</p>

<p>I tried the setTimeout method but could not get it to work.
I am using a simple line by line since the timing difference and (lack of knowledge).
Thanks for your help.</p>

<p><a href="http://jsfiddle.net/q9EZg/6/" rel="nofollow">http://jsfiddle.net/q9EZg/6/</a></p>

<pre><code>$(document).ready(function () {
$("#slide1").fadeIn(2000, function () {
$("#slide1").delay(4000).fadeOut(2000);
$("#slide2").delay(6000).fadeIn(1000, function () {
$("#slide3").fadeIn(1000, function () {
$("#slide4").fadeIn(1000, function () {
$("#slide5").fadeIn(1000, function () {
$("#slide6").fadeIn(1000, function () {
$("#slide7").fadeIn(1000, function () {
$("#slide8").fadeIn(1000, function () {
$("#slide9").fadeIn(1000, function () {
$("div").delay(2000).fadeOut(1000, function () {});
});
});
});
});
});
});
});
});
});
});

&lt;div id="slide1"&gt;Slide 1&lt;/div&gt;
&lt;div id="slide2"&gt;Slide 2&lt;/div&gt;
&lt;div id="slide3"&gt;Slide 3&lt;/div&gt;
&lt;div id="slide4"&gt;Slide 4&lt;/div&gt;
&lt;div id="slide5"&gt;Slide 5&lt;/div&gt;
&lt;div id="slide6"&gt;Slide 6&lt;/div&gt;
&lt;div id="slide7"&gt;Slide 7&lt;/div&gt;
&lt;div id="slide8"&gt;Slide 8&lt;/div&gt;
&lt;div id="slide9"&gt;Slide 9&lt;/div&gt;
&lt;div id="slide10"&gt;Slide 10&lt;/div&gt;
</code></pre>
