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