Question

When I am viewing the code in action, there are no problems. But as soon as I spend some time at another browser tab, then return to the code in action, the timing/speed is too fast.

Here’s the jQuery:

var divId = 1;
var lp = 0;

$(document).ready(function (){

    setInterval(function()
        {
        //<![CDATA[

            if(divId < 6)
            {
                $('.main-banner').animate({ left: lp },400);

                $(".first-icon-inner").removeClass("active-icon");
                $("#banner-"+divId+" div:first").addClass('active-icon');

                    divId++;
                    lp-=550;

            }
            else
            {
                lp = 0;
                divId=1;

                $('.main-banner').animate({ left: lp },400);

                $(".first-icon-inner").removeClass("active-icon");
                $("#banner-"+divId+" div:first").addClass('active-icon');


            }
            //]]>

    }, 3400);

});

Answer 1

There is a bug with jQuery < 1.6.3 … extract from jQuery 1.6.3 release notes :

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.

I suggest that you update to a more recent version … ie jQuery => 1.6.3