CODEWITHSUNDEEP
javascriptjqueryloopsqueue
Ryan
Ryan

Reputation: 1791

How to repeat or loop this queue on jQuery?

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!

Upvotes: 1

Views: 2491

Answers (3)

Andy Robinson
Andy Robinson

Reputation: 7429

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 );
});

Upvotes: 0

Reigel Gallarde
Reigel Gallarde

Reputation: 65264

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

Upvotes: 2

Nick Craver
Nick Craver

Reputation: 630389

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.

Upvotes: 0

Related Questions