使用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比1但在完成后不再重新开始。我想再次启动它。对不起我的英语不好，任何帮助将不胜感激。

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

<强> 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的状态并找到需要显示的下一个wave。使用每个wave上激活的类名来管理状态。如果所有波都可见，那么我将它们全部隐藏起来并删除活动的类名。

showNextWave函数也设计为递归，因此使用setTimeout函数每1秒执行一次。