Jquery Looping Animation From The Beginning

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 sinc

Solution 1:

Check the following JSFiddle...

$(document).ready(function () {

    (functionanimate() {
        $("#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.

Solution 2:

Wrap you main animation logic in a function (which you have already done). Like this:

function Animate() {
   //your animation logic
}

And then call the same function at regular interval. Like this:

setInterval(function(){
   Animate()
}, 1000);

But, you definitely need to improve your main logic and structure.

Solution 3:

Try this

JS CODE

$(document).ready(function () {
    setInterval(intervalTest, 1000);
});

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

Solution 4:

If you want a nice way of queueing up animations, you can make an animation queue array containing objects with instructions, something like this:

varanimationQueueArr= [
    {
        selector:'#slide1',
        delay:4000,
        animation:'fadeIn',
        duration:2000,
        callback:true
    },
    {
        selector:'#slide1',
        animation:'fadeOut',
        duration:2000,
        callback:false
    },
    {
        selector:'#slide2',
        delay:6000,
        animation:'fadeIn',
        duration:2000,
        callback:true
    }
    //andsoon
];

Then, you can loop over them:

functionanimate (i, skipDelayBool) {
    skipDelayBool = skipDelayBool || false;
    var animationObj = animationQueueArr[i];
    if (animationObj.delay && false === skipDelayBool) {
        returnsetTimeout(function () {
            animate(i, true);
        }, animationObj.delay);
    }
    if (false === animationObj.callback) {
        $(animationObj.selector)[animationObj.animation](animationObj.duration);
        i += 1;
        i %= animationQueueArr.length;  // reset back to 0 if necessary to start new loopanimate(i);
    } else {
        $(animationObj.selector)[animationObj.animation](animationObj.duration,
        function () {
            i += 1;
            i %= animationQueueArr.length;
            animate(i);
        );
    }
}


animate(0);

Note I havent tested this, but it will send you on the right path and away from your worst indentation nightmares.

Solution 5:

I've already answered this question once. Duplicate: jQuery looping command See the edits to the question and you will see that I have answered it twice now.

$(document).ready(function me() {
    $("#slide1").fadeIn(100).delay(100).fadeOut(100, function () {
        (function startFade(slide, step) {
            if ((slide === 1) && (step === -1)) {
                setTimeout(me, 100);
            } else if (slide < 10) {
                $("#slide" + slide)[step === 1 ? "fadeIn" : "fadeOut"](100, function () {
                    startFade(slide + step, step);
                });
            } else {
                startFade(slide - step, -step);
            }
        }(2, 1));
    });
});