使用 jquery 的波浪动画

Question

我想显示扬声器的波浪动画。扬声器发出 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，但完成后它不会再次启动。我想再次启动它。抱歉我的英语不好，我们将不胜感激。

Answer 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 秒执行一次。