javascript animation queueing when page does not h

Question

So this sliding animation works great when viewing on the page, but if i go to another browser tab for a couple minutes and come back to this tab it's like all the animations queued up while i was gone and run superfast all at once. It looks horrible... Any ideas?

$(document).ready(function() {

var timeOuts = new Array();
var currentSlide = 0;
var slides = $('.banner_images').length;

homeanimation(currentSlide);
function homeanimation(i) {

    if (i == slides) { i = 0; }
    $('.banner_images:eq(' + i + ')').css('left', '-901px');
    $('.banner_images:eq(' + i + ')').animate({ "left": "0px" }, 800);
    $('.overlay-content:eq(' + i + ')').fadeIn(1500);
    timeOuts[0] = setTimeout(function() { $('.banner_images:eq(' + i + ')').animate    ({ "left": "901px" }, 800) }, 6000);
    timeOuts[1] = setTimeout(function() { $('.overlay-content:eq(' + i + ')').fadeOut(700) }, 6000);
    timeOuts[3] = setTimeout(function() { currentSlide = i + 1; }, 6000);
    timeOuts[2] = setTimeout(function() { homeanimation(currentSlide); }, 6000);

}

});

Answer 1

ditch the setTimeouts. they behave strangely where window focus is concerned. check out jQuery's natural .queue() functionality.

Answer 2

Upgrade to 1.6.3+

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

They pulled out the requestAnimationFrame in 1.6.3 which is the cause of your problem (most likely)

Answer 3

http://api.jquery.com/animate/ :

Because of the nature of requestAnimationFrame(), you should never queue animations using a setInterval or setTimeout loop. In order to preserve CPU resources, browsers that support requestAnimationFrame will not update animations when the window/tab is not displayed. If you continue to queue animations via setInterval or setTimeout while animation is paused, all of the queued animations will begin playing when the window/tab regains focus. To avoid this potential problem, use the callback of your last animation in the loop, or append a function to the elements .queue() to set the timeout to start the next animation.