1

所以我有两个在不同时间运行的脉冲动画。

http://jsfiddle.net/JuFxn/16/

脉冲的代码在这里。小提琴中还有更多内容，因此请检查一下。

function fadeItIn() {
var child;

child = 4;
setTimeout(fadeIn, 3000);

function fadeIn() {
    $("#child" + child).fadeIn(175);
    --child;
    if (child >= 0) {
        // Continue fading in
        setTimeout(fadeIn, 175);
    } else {
        // Start fading out
        ++child;
        setTimeout(fadeOut, 175);
    }
}

function fadeOut() {
    $("#child" + child).fadeOut(175);
    ++child;
    if (child <= 4) {
        // Continue fading out
        setTimeout(fadeOut, 175);
    } else {
        // Start over again
        setTimeout(fadeIn, 3000 - 1575);
    }
}
}

The issue I'm having is that when the tab becomes inactive, the timings of the two pulses desync and go off pretty far from each other. 我做了一些研究，发现了这个

当 Chrome 中的选项卡处于非活动状态时，如何使 setInterval 也起作用？

他们似乎通过在每个周期中实现一个真实世界的计数器并添加计数器的值并让 div 根据计数器生成的距离移动来解决这个问题。实施类似的东西会解决我遇到的问题吗？我什至会如何使用它？我认为问题是由于在第二个函数上使用了 setTimeout 引起的。

setTimeout(fadeItInDoom, 500);

如果我取出 setTimeout 并使两个脉冲同时执行，则计时永远不会消失。

4

1 回答 1

1

所以我最终想出了一个修复方法来让它保持同步。

http://jsfiddle.net/bwCmk/

我完全更改了动画代码，以便它在 jQuery 中运行。然而，修复来自我如何处理更改为下一个动画。我只是为每个脉冲元素创建了一个不同的函数，并在前一个函数的末尾调用了下一个函数。所以：

FunctionA {
    code
    functionB();
}
FunctionB {
    code
    functionC();
}
etc

有效。只是把它放出来，这样如果其他人按照这些思路做了一些事情，他们就可以找到解决方法。感谢所有回答的人。

于 2013-08-22T16:27:16.493 回答