Question

所以我有一个小提琴，有两个在不同时间运行的脉冲动画。

脉冲的代码在这里。小提琴中还有更多，请查看。

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);
    }
}
}

我遇到的问题是，当标签变为不活动状态时，两个脉冲的时序不同并且彼此相距很远。我做了一些研究，发现了这个

How can I make setInterval also work when a tab is inactive in Chrome?

他们似乎通过在每个周期中实现真实世界计数器并添加计数器的值并使div基于计数器生成的距离移动来解决问题。实现类似的东西会解决我遇到的问题吗？我怎么用呢？我认为问题是由于在第二个函数上使用了setTimeout而引起的。

setTimeout(fadeItInDoom, 500);

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

Answer 1

所以我最终找到了一个修复程序，使其保持同步。

http://jsfiddle.net/bwCmk/

我完全改变了动画代码，以便它在jQuery中运行。然而，问题在于我如何处理更改为下一个动画。我刚为每个脉冲元素做了一个不同的函数，并在前一个函数的末尾调用了下一个函数。所以：

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

它奏效了。只是把它放在一边，这样如果其他人在这些方面做了些什么，他们就可以找到它的修复方法。感谢所有回答的人。

使用实时修复功能修复非活动选项卡中的Javascript动画计时

1 个答案: