title: Waves animation using jquery
body: <p>I want to show waves animation of loud speaker. There are 3 waves coming from a loudspeaker. I want to show like this :- </p>
  
  <pre><code>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.
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/Cc0kP.jpg" alt="enter image description here"></p>
  
  <p>I have tried following code :-</p>
  
  <pre><code>$('.waves1').hide();
  $('.waves2').hide();
  $('.waves3').hide();
  $('.waves4').hide();
  
  
  function waveIt(element, times, klass, delay) 
  {
  for (var i = 0; i &lt; 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);
  </code></pre>
  
  <p><strong>It initially shows 1 by 1 after a 1 sec interval but after completing it does not start again</strong>.I want to start it again. Sorry for my bad English and any help will be appreciated.</p>