jQuery text effect where words appear one by one

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: «вот тестовый текст. [строго] Мы считаем, что это лучше [/ строго], чем когда-либо». и посмотрите на проблему.

7
задан BerggreenDK 12 January 2011 в 23:26
поделиться