2

3 秒ごとにボタンをパルスするこの関数を作成しました。現在、私が取り組んでいるウェブサイトでは、ページ上に同時に 16 個ほどがあり、すべてが互いに 0.5 秒間隔でオフになっています。タブが非アクティブになると、タイミングがすべて台無しになり、機能しなくなります。タブが非アクティブなときにアニメーションを一時停止するか、リアルタイムで継続するようにするには、コードに何を追加できますか。個人的には、機能する限り、どちらが機能するかは気にしません。

私はこのプロジェクトのためにフィドルを作りました。

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 ミリ秒のタイマーを 1 つ使用し、フェードする子 (およびその方法) を覚えておくことをお勧めします。そうすれば、その 1 つのタイマーが中断された場合、中断したところから再開されます (ドリフトの問題はありません)。

このようなもの：更新されたフィドル

$('.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 に答える