jqueryで各行のテキストをアニメーション表示できますか？

Question

jqueryでテキストを1行に表示することはできますか？私はそれがフラッシュで行うことができることを知っている私はここに例があるhttp://iliketoplay.dk/#/blog/deffがあります。ビデオの再生中、マウスはテキストを含むボックスを開く円をクリックしますが、テキストの各行は一度に1つずつ表示され、本当にクールな効果があります。それは再作成できますか？

Answer 1

ことをアニメーション化します。あなたはチャンクアップこのように行うことができます行のテキストを行う必要があります。

var lines = text.split("\n"); 

あなたが望むようそして、あなたはそれぞれの行で何かを行うことができ、例えば：

var timer, 
    displayLine = function(){ 
    var nextLine = lines.shift(); 
    if(nextLine){ 
     var newLine = $('<span class="initState">' + nextLine + '</span>'); 
     $('#someContainer').append(newLine); 
     newLine.animate({ [PUT SOME ANIMATION HERE] }, 1000); 
     } 
     timer = setTimeout(displayLine,3000); 
    } 
    } 
timer = setTimeout(displayLine,3000); 

ここに完全な例を参照してください。 http://jsfiddle.net/7dd52/

Answer 2

あなただけの行ごとにdiv要素を使用して、これが問題になることはありませんが、解決策は、あなたの入力フォーマットに依存して、特定の...

<div class="first">first line</div> 
<div class="second">second</div> 

$(".first").animate({'left':'-15px'}, 1000);