Question

So I have this weird issue that i am hitting, i have a slide show in which set interval fires up jquery animate method. all works great.

Until i switch tabs. If i switch back to tab with slideshow in some time, all of the sudden animation is fired repeatedly, with out any inteval in place. Like it is playing catch up.

I kind of figured that it has something to do with RequestAnimationFrame and jQuery’s animate method. And how animation rendering is suppressed while tab is inactive. While interval is kept on firing up every so often, even when window is inactive.

Could any one elaborate more on this, would much appreciate it.

Here is the core code that does that:

function animate(setCurrent){
    animationDistance = opt.cSlideWidth * (opt.cCurrentSlide - 1);
    carousel.animate({left: '-' + animationDistance}, opt.cTransitionSpeed});
}
opt.cSetUpIntervalMethod = function(action){
    if (action === 'start') {
        clearInterval(opt.cSlideTimer);
        opt.cSlideTimer = setInterval(function(){animate();},opt.cSlideDelay);
    }
}
opt.cSetUpIntervalMethod('start');

Answer 1

This was a bug in older versions of JQuery which has since been fixed as of 1.6.3. Update your version.

“We had high hopes for the browser’s requestAnimationFrame API when we
added support into version 1.6. However, one of the highest-volume
complaints we’ve received since then relates to the way
requestAnimationFrame acts when a tab is not visible. All the
animations initiated when the tab is invisible “stack” and are not
executed until the tab is brought back into focus. Then they all
animate at warp speed! We’ve removed support for this API (which has
no impact on the way you call jQuery’s animation features) and plan to
incorporate it into a future version of jQuery.”

http://blog.jquery.com/2011/09/01/jquery-1-6-3-released/