title: jQuery text effect where words appear one by one
body: <p>I was asked if I could come up with a text effect in HTML using jQuery where I get a string and then the routine automatically detects the words and animates each word in, one at a time.</p>
  
  <p>Like.</p>
  
  <ol>
  <li><p>sec into the animation shows: "Happy"</p></li>
  <li><p>sec into the animation shows:"Happy New"</p></li>
  <li><p>sec into the animation shows:"Happy New Year"</p></li>
  <li><p>sec into the animation shows:"Happy New Year 2011"</p></li>
  </ol>
  
  <p>each word should "fade/animate" in slowly, I thought a simple sliding pane going right in pixels would be satisfying - but no. Word by word.</p>
  
  <p>I could need some ideas on this one. I know some jQuery and a lot of Javascript, so I guess I need a bit of help with the jQuery part.</p>
  
  <p>For the list of words, I would just split on " " (whitespace) and accept that ",.!" etc are part of a word.</p>
  
  <p>But how do I animate this "dynamic array" in jQuery - is there a plugin somewhere or am I the first?</p>
  
  <p>I was thinking that perhaps a bulleted list could be the trick too, then make it float horizontally like a menu and then add the word as a new bullet, once per second. But I am excited to see what the experts in here come up with for solution. :O)</p>
  
  <p><strong>EDIT</strong>
  From the marked answer, I've this:</p>
  
  <pre><code>    var str = $('div#greeting h1').html(); // grab text
      $('div#welcome h1').html(""); // clear text
  
      var spans = '&lt;span&gt;' + str.split(" ").join(' &lt;/span&gt;&lt;span&gt;') + '&lt;/span&gt;';
      $(spans).hide().appendTo('div#greeting h1').each(function(i)
      {
          $(this).delay(500 * i).fadeIn();
      });
  </code></pre>
  
  <p>The STRONG tag works, but somehow parts of the text fades in a group.</p>
  
  <p>Try this:
  "here is a test text. [strong]We believe this is better[/strong] than ever." and see the problem.</p>