Question

I have a simple function that I wrote that transitions three div elements using a fade in/out effect. The event is triggered when a user clicks a link. Here’s my code:

$(".link1").click(function () {
   $(".feature1").fadeIn(1000);
   $(".feature2").fadeOut(1000);
   $(".feature3").fadeOut(1000);
});

$(".link2").click(function () {
   $(".feature1").fadeOut(1000);
   $(".feature2").fadeIn(1000);
   $(".feature3").fadeOut(1000);
});

$(".link3").click(function () {
   $(".feature1").fadeOut(1000);
   $(".feature2").fadeOut(1000);
   $(".feature3").fadeIn(1000);
});

I need to be able to set some sort of timer so that these transitions happen automatically every 8 seconds or so. I also want them to “loop” essentially, so that if we get to the third div in the set, it returns to the first div.

Answer 1

Try using setTimeout() function.

var timer = null;

function foo_loop(div, timeout) {
  if (div > 3) div = 1;
  $(".feature"+div).fadeIn(1000);
  $("div[class^=feature]:not(.feature"+div+")").fadeOut(1000);
  clearTimeout(timer);
  timer = setTimeout(function() {
    foo_loop(div + 1, timeout);
  }, timeout);
}

Run this like that (To start with first div and 8 second timeout):

foo_loop(1, 8000);

Function for stopping loop:

function stop_loop() {
  clearTimeout(timer);
}

Run it when you need to stop the loop (for example on click on element with id=”stop”):

$('#stop').bind('click', stop_loop);