jQuery text effect where words appear one by one

Question

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.

Like.

1. sec into the animation shows: "Happy"

2. sec into the animation shows:"Happy New"

3. sec into the animation shows:"Happy New Year"

4. sec into the animation shows:"Happy New Year 2011"

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.

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.

For the list of words, I would just split on " " (whitespace) and accept that ",.!" etc are part of a word.

But how do I animate this "dynamic array" in jQuery - is there a plugin somewhere or am I the first?

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)

EDIT From the marked answer, I've this:

    var str = $('div#greeting h1').html(); // grab text
    $('div#welcome h1').html(""); // clear text

    var spans = '<span>' + str.split(" ").join(' </span><span>') + '</span>';
    $(spans).hide().appendTo('div#greeting h1').each(function(i)
    {
        $(this).delay(500 * i).fadeIn();
    });

The STRONG tag works, but somehow parts of the text fades in a group.

Try this: "here is a test text. [strong]We believe this is better[/strong] than ever." and see the problem.

Answer 1

Working example: http://jsfiddle.net/TcdQb/

var str = $('span.ticker').text();

var spans = '<span>' + str.split(/\s+/).join(' </span><span>') + '</span>';

$(spans).hide().appendTo('body').each(function(i) {
    $(this).delay(1000 * i).fadeIn();
});

• This places the words in span tags: "<span>Happy </span><span>New </span><span>Year </span><span>2011</span>"

• Creates DOM elements: $(spans)

• Hides them: .hide()

• Appends them: .appendTo('body')

• Finally, iterates over them using .each(), and .delay() the .fadeIn() of each one by 1000ms multiplied by the current index of the iteration.

---

EDIT: Here's an update to the example that uses a shorter delay, and a longer animation, so the animations overlap a little.

http://jsfiddle.net/TcdQb/1/

    $(this).delay(400 * i).fadeIn(1000);

---

EDIT: To deal with nested tags (one level deep only) you could do this:

http://jsfiddle.net/WgMrz/

var h1 = $('div#greeting h1');

h1.hide().contents().each(function() {
    var words;
    if (this.nodeType === 3) {
        words = '<span> ' + this.data.split(/\s+/).join(' </span><span> ') + ' </span>';
        $(this).replaceWith(words);
    } else if (this.nodeType === 1) {
        this.innerHTML = '<span> ' + this.innerHTML.split(/\s+/).join(' </span><span> ') + ' </span>';
    }
});

   // Remove any empty spans that were added
h1.find('span').hide().each(function() {
    if( !$.trim(this.innerHTML) ) {
        $(this).remove();
    }
});

h1.show().find('span').each(function(i) {
    $(this).delay(400 * i).fadeIn(600);
});

Answer 2

I'm not an expert, but maybe you're overthinking this. How about:

   var fadeWordsIn = function(elem$) {
      var txt = elem$.text().split(' ');
      elem$.empty();
      var pushIt = function() {
          if (txt.length) {
              var word = txt.shift();
              var span$ = $("<span>" + word + " </span>");
              elem$.append(span$);
              span$.hide().fadeIn(1000, pushIt);
          }
       };
       pushIt();
  };

Answer 3

You want the "BlockFadeIn by word" animation here: http://dev.seankoole.com/jquery/ui-effect/text.html

Just released!