Question

I’ve found plenty of documentation on infinite loops, but with multiple approaches and nothing that really EXPLAINS it, making it difficult to implement to my code.

I’m looking to use it in two ways:

1. horizontal scrolling (click arrow and animate)

http://jsfiddle.net/stfzy/33/ (currently I’ve got it to stop when it reaches end)

1. automatic loop of just one div, similar to this:

http://jsfiddle.net/UHpbR/2/

(function($) {
    $.fn.seqfx = function() {
        var elements = this,
            l = elements.length,
            i = 0;

        function execute() {
            var current = $(elements[i]);
            i = (i + 1) % l;

            current
                .fadeIn(400)
                .delay(4000)
                .fadeOut(300, execute);
        }
        execute();
        return this;
    };
}(jQuery));

$("#fader div").seqfx();

Regardless of what the best solution is (i.e. is the stuff above any good or is there a simpler way?), if someone can explain the pieces or direct me to documentation that does, it’d be really great. I’d like to understand WHY the code is getting it to loop, not just copy/paste.

Thank!

Answer 1

The “infinite loop” is due to recursion in the call to execute():

.fadeOut(300, execute);

This means that fadeOut will call execute() once the element has faded, meaning that execute() essentially calls itself again.