jQuery: fade through span containers
<p>Have this HTML</p>

<pre><code>&lt;span style="display:none"&gt;slogan 1&lt;/span&gt;
&lt;span style="display:none"&gt;slogan 2&lt;/span&gt;
&lt;span style="display:none"&gt;slogan 3&lt;/span&gt;
</code></pre>

<p>Have this JS:</p>

<pre><code>var timer = 0;
$('.banner').children('span').each(function(index) {
  timer = timer + 2000;
  $(this).delay(2500*index).fadeIn(timer, 'linear').fadeOut('3000', 'linear');
});
</code></pre>

<p>JS basically cycles through each span fading them in and out.
But it does it only ONCE (from slogan 1 to slogan 3).
I want to somehow cycle spans as many times as I want.
for(){} does it improper ways.</p>

<p>Could you help me in this?
Thanks.</p>
