javascript animation queueing when page does not have focus

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

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.