title: jQuery recursive fade-in function
body: <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>