0

I have a setInterval() which effectively loops a set of images fading in and out on top of each other.

Here is a fiddle: http://jsfiddle.net/CBWKa/

The problem I'm having is the same as this though: My recursive setTimeout function speeds up when tab becomes inactive

When you switch tabs away for a few minutes and switch back the animation speeds up drastically almost like its trying to "catch up" with itself.

So I've learnt that the best way to get around this is to use .delay() and .queue() rather than javascript's setTimeout and setInterval functions. However, I can't work out how to use the two functions to create a looping animation function on several elements (not just the one).

Can anyone help me please?

Thank you.

Community
  • 1
  • 1
Thomas Clayson
  • 29,657
  • 26
  • 147
  • 224

1 Answers1

0

The classical pattern with .delay() and .queue() works like this:

$('element').animate(…).delay(timeout).queue(function(next){
    // do whatever you like after the timeout;
    next();
});

To concatenate your animations you could also use the callback parameters from fadeIn and fadeOut. E.g.

$('some').delay(timeout).fadeOut('slow', function(){
    // do something after fading
});

But nevertheless for timing stuff in jQuery I always recommend that plugin jquery-timing. This enables concatenation of different animations way easier.

With jquery-timing your complete fading cycle code can be done with only one line:

$('.slides img').repeat().each($).fadeIn().wait(2000).fadeOut();

That's all.

peter
  • 185
  • 5