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

Is this kind of what you mean?

setInterval(myFunction,8000);

The setInterval function in javascript runs a function every (in this case) 8 seconds set in it’s second parameter. You’ll notice there are no parenthesis when you call your function.

You can also call an anonymous function like this:

setInterval(function(){alert("Hello")},3000);

If you want to be able to control this via a click event you can do something like this:

var loop;
$(elem).click(function(){
    loop = setInterval(fades,8000);
});

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

And you can stop the loop this way: clearInterval(loop);