2

我创建了这个功能，每 3 秒脉冲一个按钮。现在，在我正在开发的网站上，页面上同时有 16 个这样的人，彼此相隔半秒。现在，当标签变得不活跃时，时间就会被拧紧并且不起作用。我可以在代码中添加什么以使其在选项卡处于非活动状态时暂停动画或让它们实时继续。我个人不在乎哪个有效，只要有效。

我为这个项目做了一个小提琴。

http://jsfiddle.net/JuFxn/

脉冲的代码是这样的

function fadeItIn() {

  window.setInterval(function () {

    // Fade Ins
    $('#child4').fadeIn(175);
    setTimeout(function () {
        $('#child3').fadeIn(175);
    }, 175);
    setTimeout(function () {
        $('#child2').fadeIn(175);
    }, 350);
    setTimeout(function () {
        $('#child1').fadeIn(175);
    }, 525);
    setTimeout(function () {
        $('#child').fadeIn(175);
    }, 700);

    // Fade Outs
    setTimeout(function () {
        $('#child').fadeOut(175);
    }, 875);
    setTimeout(function () {
        $('#child1').fadeOut(175);
    }, 1050);
    setTimeout(function () {
        $('#child2').fadeOut(175);
    }, 1225);
    setTimeout(function () {
        $('#child3').fadeOut(175);
    }, 1400);
    setTimeout(function () {
        $('#child4').fadeOut(175);
    }, 1575);

  }, 3000);
}

该函数在 JS 文档的开头调用。同样，我不介意哪个有效，只要它有效。

4

1 回答 1

1

即使页面没有处于非活动状态，这些时间也会慢慢漂移。您给出的值setTimeout并不是绝对精确的。

正因为如此，并且因为我认为它也可以解决您的实际问题，所以我建议使用单个 125 毫秒计时器，并记住要淡化哪个孩子（以及以何种方式）。那样的话，如果那个定时器被暂停，它会从它停止的地方开始（并且你没有漂移的问题）。

像这样的东西：更新的小提琴

$('.child0,.child1,.child2,.child3,.child4').hide();
fadeItIn();

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

注意：我将您的更改child为child0. 最好与这些事情保持一致。:-)

（另外，fadeItIn函数声明后不需要分号。声明后面没有分号；表达式有。这是无害的，但我想我会提到它。）

于 2013-08-20T12:34:26.890 回答