How to repeat or loop this queue on jQuery?

Question

Hi,
This is code for a faded slideshow. Is there a way to repeat or loop this queue? To start again on this top code $("#page2_image").hide();

Here's the code in jQuery:

$(document).ready(function(){
   $("#page2_image").hide();
   $("#page3_image").hide();
   $("#page1_image").fadeOut(10000);
   $("#page2_image").fadeIn(10000).fadeOut(10000);
   $("#page3_image").delay(10000).fadeIn(10000);
});

Thank you for your help!

Answer 1

you can use the callback of fadeIn()

$(document).ready(function(){
   function loop(){
   $("#page2_image").hide();
   $("#page3_image").hide();
   $("#page1_image").fadeOut(10000);
   $("#page2_image").fadeIn(10000).fadeOut(10000);
   $("#page3_image").delay(10000).fadeIn(10000,loop); // call loop here...
  }
  loop();
});

you can also try a similar approach here

Answer 2

I think what you're looking for is a slightly different approach, something like this:

$(function() {
  var images = ['#page1_image', '#page2_image', '#page3_image'], i = 0;
  function rotate() {
    $(images[i]).fadeOut(10000);
    i = (i+1)%images.length;
    $(images[i]).fadeIn(10000, rotate);
  } 
  $.each(images.slice(1), function(index, val) { $(val).hide(); });
  rotate();  
});​

Give it a try here, if you don't fade smoothly back to the first image, your animation will have a jump, when the loop cycles. The above smoothly fades continuously, and works for any number of elements you want to cycle through, just add their selectors to the array.

The components are:

• Setup the array of selectors to fade...you can even cache the selectors here if they're not IDs it's a good idea, instead of strings.
• Rotate fades out the current, gets the next (wrapping around if needed) and fades it in, the .fadeIn() will call rotate again when it's done.
• Last we're hiding all the images except the first (via .slice()), and starting the loop.

Answer 3

Use setInterval to cause the function to be repeated every X seconds.

function slideSwitch() {
   $("#page2_image").hide();
   $("#page3_image").hide();
   $("#page1_image").fadeOut(10000);
   $("#page2_image").fadeIn(10000).fadeOut(10000);
   $("#page3_image").delay(10000).fadeIn(10000);
}

$(function() {
    setInterval( slideSwitch, xxxx );
});