jQuery/JavaScript timer

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.

have you tried setInterval()?

MrOBrian
– MrOBrian

2012-07-26 20:42:50 +00:00
Commented Jul 26, 2012 at 20:42 — MrOBrian
– MrOBrian, Commented Jul 26, 2012 at 20:42

Pavel Staselun · Accepted Answer · 2012-08-02 06:52:00Z

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

edited Aug 2, 2012 at 6:52

answered Jul 26, 2012 at 20:49

Pavel Staselun

2,0201 gold badge13 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Jeremy Over a year ago

This is perfect, and exactly what I was looking for. Is there any way that I can pause the automatic transition when I click one of the links included in my original example?

Pavel Staselun Over a year ago

Yes you can - create global variable var timer = null and change function: clearTimeout(timer); timer = setTimeout(function() { foo_loop(div + 1, timeout); }, timeout); And add stop event: $('#stop').bind('click', function() { clearTimeout(timer); });

Jeremy Over a year ago

Do I add this to the original code, or is it a separate function? Do you mind updating your original answer to reflect how this would be added?

Jeremy Over a year ago

Thanks, this mostly appears to work. However, it doesn't work when the item clicked is the final div in the set. The loop keeps on running. Is that because this rule overrides the stop_loop function? if (div > 3) div = 1;

Pavel Staselun Over a year ago

Extend stop_loop() function with alert to be sure it is called. It should clear timer so that loop stops.

|

ama2 · Accepted Answer · 2012-07-26 20:45:05Z

1

setInterval(expression, timeout); runs the function in intervals, with the length of the timeout between them

example:

var intervalID = setInterval(alert('heelo'), 3000); // will alert hello every 3 seconds

// clearInterval(intervalID); // will clear the timer

answered Jul 26, 2012 at 20:45

ama2

2,6693 gold badges23 silver badges30 bronze badges

1 Comment

Christoph Over a year ago

this won't work, you need to pass a function(reference) or an expression which is essentially a string and not recommendable.

Ram · Accepted Answer · 2012-07-26 20:45:56Z

1

Try the following:

var i = 0;
var transition = setInterval(function(){
                     i++;
                     if (i == 4) {i = 1}
                     $(".feature"+i).stop().fadeIn(1000, function(){
                        $(this).delay('6000').fadeOut(1000)
                     })
                  }, 8000)

answered Jul 26, 2012 at 20:45

Ram

145k16 gold badges174 silver badges201 bronze badges

4 Comments

Horen Over a year ago

or maybe easier: instead of

$(".feature"+i).stop().fadeIn(1000, function(){                         $(this).delay('7000').fadeOut(1000)                      })

just go with $(".link"+i).click()

Christoph Over a year ago

@Horen triggering .click() is mostly not recommendable. Rather put it into a function and call the function instead.

Horen Over a year ago

@Christoph isn't click() a function? why is it not recommendable?

Christoph Over a year ago

@Horen I meant it in another way - mostly you pass an anonymous function to the eventhandler. Just use a named function and pass the function-reference to the eventhandler. This way you have the option call the named function without triggering the event. Triggering events programmatically is not recommendable because you dont have all parameters of the event object this way.

hackattack · Accepted Answer · 2012-07-26 20:46:23Z

not sure I fully understand when you want them to loop or how often, but I think this should help you out a bit... every 8 seconds it loops through the animations...

function fadeLoop(selectors, animations, times, index) {
    index = index || 0;
    if(index == selectors.length) return;
    $((selectors[index])[animations[index]](times[index], function() {
        fadeLoop(selectors, animations, times, index + 1);
    });
}

setInterval(function() {
    fadeLoop(
        ['.feature1', '.feature2', '.feature3'],
        ['fadeIn', 'fadeOut', 'fadeOut'],
        [1000, 1000, 1000]
    );

    fadeLoop(
        ['.feature1', '.feature2', '.feature3'],
        ['fadeOut', 'fadeIn', 'fadeOut'],
        [1000, 1000, 1000]
    );

    fadeLoop(
        ['.feature1', '.feature2', '.feature3'],
        ['fadeOut', 'fadeOut', 'fadeIn'],
        [1000, 1000, 1000]
    );
}, 1000 * 8);

Collectives™ on Stack Overflow

jQuery/JavaScript timer

4 Answers 4

6 Comments

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related