javascript + jquery + setinterval + animation

javascript, jquery, jquery-animate, setinterval

Solution

Newer versions of jQuery use `requestAnimationFrame` callbacks to handle effects, and browsers don't process those on hidden tabs.

In the meantime, your `setInterval` events are still happening, causing more animations to get queued up.

Rather than use `setInterval` to schedule the animations, use the "completion callback" of the last animation to trigger the next cycle, with a `setTimeout` if necessary.

function slides1() {

    ...

    $("table#agah1").animate({
        "left": first1
    }, "slow");
    $("table#agah2").animate({
        "left": first2
    }, "slow", function() {
       setTimeout(slides1, 2000); // start again 2s after this finishes
    });
}

$(function () {
    setTimeout(slides1, 3000);    // nb: not "slides1()"
});

This will ensure that there's a tight coupling between the interanimation delay and the animations themselves, and avoid any issues with `setTimeout` getting out of sync with the animations.

Problem

I'm having a problem with setInterval and jquery animate. Here is my code: ``` function slides1() { ... $("table#agah1").animate({ "left": first1 }, "slow"); $("table#agah2").animate({ "left": first2 }, "slow"); } $(function () { cyc = setInterval("slides1()", 3000); }); ``` When switch to another browser tab, and return after a time, the animation keep doing it without delay, for the time I've been away from the tab, and then act correct. I've added these also without any luck: ``` $(window).focus(function () { jQuery.fx.off = false; cyc = setInterval("slides1()", 3000); }); $(window).blur(function () { jQuery.fx.off = true; window.clearInterval(cyc); }); ```

Original source