javascript - jQuery looping animation from the beginning

Question

I would like this animation to repeat from the very beginning each time (#slide1).

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.

http://jsfiddle.net/q9EZg/6/

$(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 () {});
});
});
});
});
});
});
});
});
});
});

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

Answer 1

Check the following JSFiddle...

$(document).ready(function () {

    (function animate() {
        $("#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, animate); // Call animate again
                                        });
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });

    }()); // Call the animate function
});

I wrapped your code in a Animate function that is called again after the last step.

PS. And yes you forget to enable JQuery in JSFiddle, but I assume that is not your question or related to your question.