jQuery recursive fade-in function
<p>I'm trying to animate a logo. The markup looks like this:</p>

<pre><code>&lt;div id="logo"&gt;
    &lt;h1&gt;
        &lt;span&gt;A&lt;/span&gt;&lt;span&gt;n&lt;/span&gt;&lt;span&gt;t&lt;/span&gt;&lt;span&gt;o&lt;/span&gt;&lt;span&gt;n&lt;/span&gt;&lt;span&gt;i&lt;/span&gt;&lt;span&gt;o&lt;/span&gt;&lt;span&gt;R&lt;/span&gt;&lt;span&gt;o&lt;/span&gt;&lt;span&gt;s&lt;/span&gt;&lt;span&gt;s&lt;/span&gt;&lt;span&gt;i&lt;/span&gt;
    &lt;/h1&gt;
    &lt;h2&gt;composer&lt;/h2&gt;
&lt;/div&gt;
</code></pre>

<p>What I'm trying to do is to make a fade-in effect for each <code>&lt;span&gt;</code> inside <code>#logo</code>. To do so, I'm using this code:</p>

<pre><code>function fadeInRecursive (elementToFade) {

    if (!elementToFade) {
        elementToFade = $('#logo span:first-child')
    }

    var next = elementToFade.next('#logo span')

    if (!next) {return false}

    elementToFade.animate({
        opacity: 1
    }, 3000, fadeInRecursive(next))
}

$(document).ready( fadeInRecursive )
</code></pre>

<p>But Firefox crashes...</p>

<p>What am I doing wrong?</p>
