使用jquery的Wave动画

Question

我想展示的是响亮音箱的波浪动画。有三个波来自一个扬声器。我想这样表现:-

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秒间隔后的1x1，但在完成之后，.I希望再次启动它。对不起，我的英语不好，任何帮助都将不胜感激。

Answer 1

我最初的印象是，你可能应该使用一个动画GIF来做这件事。但是，我不太确定您的用例，所以我将提供可以为您做到这一点的javascript。基本上，您必须以递归的方式使用setTimeout。

以下是显示它工作的JS：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);

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