CODEWITHSUNDEEP
javascriptjquery
user6002037
user6002037

Reputation:

How to make jQuery each loop repeat infinite number of times

I am trying to create a slideshow and repeat an each loop once it has cycled through each image. I have tried everything but cannot get the loop to continue after it has cycled through each image. Please see my code and attempt below.

Anyone have any ideas? Have tried everything.

html

<img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-1.jpg" />
<img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-5.jpg" />
<img src="http://elegantthemes.com/preview/InStyle/wp-content/uploads/2008/11/s-3.jpg" />

js

function test() {
    $("img").each(function(index) {
        $(this).hide();
        $(this).delay(3000 * index).fadeIn(3000).fadeOut();
    });

   if(index === 3){
      index = 0;
   }
}
test();

Upvotes: 2

Views: 1705

Answers (2)

A. Wolff
A. Wolff

Reputation: 74420

Your best bet is to use the promise:

function test() {
    $("img").hide().each(function(index) {
        $(this).delay(3000 * index).fadeIn(3000).fadeOut();
    }).promise().done(test);
}
test();

-jsFiddle-

Upvotes: 3

nicael
nicael

Reputation: 18995

You should just start the loop again after the interval, no need to reset the index (which also does completely nothing).

function test() {
    $("img").each(function(index) {
        $(this).hide();
        $(this).delay(3000 * index).fadeIn(3000).fadeOut();
    });
    setTimeout(test,9400)
}
test();

Since there're three imgs, each showing with the delay of 3000, and fadeOut takes 400 ms by default, the delay should be:

3*3000+400 = 9400

Note that every next fadeIn doesn't wait for completion of the previous fadeOut, thus stealing first two 400 ms delays of fadeOut.

Upvotes: 3

Related Questions