jQuery looping .each function

Question

I've got a bunch of blockquotes that I've managed to get to fade in one after another. At the moment, after the last one has faded in and out, the function ends. But I want it to loop and start from the beginning again. Here's my code so far that works:

$("div.quotes blockquote").each(function (index){
  $(this).delay(4500*index).fadeIn(500).delay(4000).fadeOut(500);
});

How do I get it to loop?

VisioN · Accepted Answer · 2012-11-22 13:04:37Z

2

One possible solution:

function run() {
    var els = $("div.quotes blockquote");
    els.each(function(i) {
        $(this).delay(4500 * i).fadeIn(500).delay(4000).fadeOut(500, function() {
            if (i == els.length - 1) run();
        });
    });
}
run();

DEMO: http://jsfiddle.net/eDu6W/

answered Nov 22, 2012 at 13:04

VisioN

146k35 gold badges287 silver badges291 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CaribouCode Over a year ago

Thanks for all the answers but this is the one I used. It's one of the most simple solutions and does what I need

svenbravo7 · Accepted Answer · 2012-11-22 13:04:16Z

0

function toggleBlockQuotes()
{
    var countBlockquotes = $("div.quotes blockquote").length;
    var b = 1;
    $("div.quotes blockquote").each(function (index)
    {
        $(this).delay(4500*index).fadeIn(500).delay(4000).fadeOut(500);
        b++;
        if(b == countBlockquotes)
        {
            toggleBlockQuotes();
        }
    });
}

Take note that this will create an infinite loop.

answered Nov 22, 2012 at 13:04

svenbravo7

3171 silver badge6 bronze badges

Comments

Francis Kim · Accepted Answer · 2012-11-22 13:05:19Z

0

function loop() {
    $("div.quotes blockquote").each(function(index) {
        $(this).delay(4500 * index).fadeIn(500).delay(4000).fadeOut(500, function() {
            loop();
        });
    });
}

loop();

answered Nov 22, 2012 at 13:05

Francis Kim

4,2954 gold badges39 silver badges51 bronze badges

Comments

A. Wolff · Accepted Answer · 2012-11-22 13:12:17Z

0

Could be done like this, depends what you need exactly: http://jsfiddle.net/MmPgG/

(function loopAnim() {
    var $elems = $("div")
    $elems.each(function(index) {
        var $that = $(this);
        (function() {
            $that.delay(4500 * index).fadeIn(500).delay(4000).fadeOut(500, function() {
                if (index == $elems.length - 1) {
                    $elems.show();
                    loopAnim()
                }
            });

        })($that)
    });
})()

answered Nov 22, 2012 at 13:12

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Collectives™ on Stack Overflow

jQuery looping .each function

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related