Foi-me perguntado se eu poderia criar um efeito de texto em HTML usando jQuery, onde eu recebo uma string e, em seguida, a rotina detecta automaticamente as palavras e anima cada palavra, uma de cada vez.

Gostar.

segundo na animação mostra: "Feliz"

segundo na animação mostra: "Feliz Novo"

segundo na animação mostra: "Feliz Ano Novo"

segundo na animação mostra: "Feliz Ano Novo 2011"

cada palavra deve "desvanecer / animar" lentamente, pensei que um simples painel deslizante, indo direto para pixels, seria satisfatório - mas não. Palavra por palavra.

Eu poderia precisar de algumas idéias sobre este. Eu conheço jQuery e muito Javascript, então acho que preciso de um pouco de ajuda com a parte do jQuery.

Para a lista de palavras, eu apenas dividiria "" (espaço em branco) e aceitaria ",.!" etc fazem parte de uma palavra.

Mas como animar esse "array dinâmico" no jQuery - existe algum plugin em algum lugar ou eu sou o primeiro?

Eu estava pensando que talvez uma lista com marcadores também pudesse ser o truque, depois faça-a flutuar horizontalmente como um menu e adicione a palavra como uma nova bala, uma vez por segundo. Mas estou empolgado em ver o que os especialistas daqui apresentam para a solução. : O)

EDITAR A partir da resposta marcada, eu tenho o seguinte:

    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();
    });

A tag STRONG funciona, mas de alguma forma partes do texto desaparecem em um grupo.

Tente o seguinte: "aqui está um texto de teste. [Forte] Acreditamos que isso está melhor [/ forte] do que nunca." e veja o problema.