0

ラウドスピーカーの波のアニメーションを表示したい。スピーカーから 3 つの波が出ています。私はこのように見せたい:-

1st wave will be shown in 1 sec, 
2nd wave will be shown in 2 sec,
3rd wave will be shown in 3 sec,


and then all waves will be disappear and it will start again.

ここに画像の説明を入力

次のコードを試しました:-

$('.waves1').hide();
$('.waves2').hide();
$('.waves3').hide();
$('.waves4').hide();


function waveIt(element, times, klass, delay) 
{
for (var i = 0; i < 1000; i++) {
                setTimeout(function () {
                    $(element).show();
                }, delay + (300 * i));


            };


        };

        waveIt('.waves1', 10, 'i_waveflash1', 1000);
        waveIt('.waves2', 10, 'i_waveflash2', 2000);
        waveIt('.waves3', 10, 'i_waveflash3', 3000);

最初は 1 秒間隔で 1 つずつ表示されますが、完了しても再起動しません。もう一度起動したいです。私の下手な英語で申し訳ありませんが、助けていただければ幸いです。

4

1 に答える 1

1

私の第一印象は、これを行うにはおそらくアニメーション GIF を使用するべきだというものです。ただし、ユースケースについては正確にはわかりませんので、これを実行できる JavaScript を提供します。基本的に、setTimeout を再帰的に使用する必要があります。

これが動作していることを示す JS Fiddle です: http://jsfiddle.net/H8R5b/

Javascript

var showNextWave = function() {
    var hiddenWaveEls = $('.waves:not(.active)');
    if (hiddenWaveEls.length > 0) {
        hiddenWaveEls.first().show().addClass('active');
    } else {
        $('.waves').hide().removeClass('active');
    }
    setTimeout(showNextWave, 1000);
};

setTimeout(showNextWave, 1000);

HTML

<div id="waves1" class="waves">1</div>
<div id="waves2" class="waves">2</div>
<div id="waves3" class="waves">3</div>

CSS

.waves {
    display: none;
}

説明

ウェーブの状態をチェックし、表示する必要がある次のウェーブを見つける関数 showNextWave を作成しました。状態は、各ウェーブでアクティブなクラス名を使用して管理されます。すべての wave が表示されている場合は、それらをすべて非表示にして、アクティブなクラス名を削除します。

showNextWave 関数も再帰的に設計されているため、setTimeout 関数を使用して 1 秒ごとに実行されます。

于 2013-10-15T07:46:59.963 に答える