Is it possible to animate each line of text with jquery?

Question

Is it possible to reveal text one line at at time in jquery? I know it can be done in flash I have an example here http://iliketoplay.dk/#/blog/deff. On the video playing, the mouse clicks a circle which opens a box that contains text but each line of text is displayed one at a time with a really cool looking effect. Can it be recreated?

Answer 1

This shouldn't be a problem, but the solution depends on your input format. You need to chunk up the text in lines which can be done like this:

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

Then you can do something with each line as you desire, e.g:

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

See a complete example here: http://jsfiddle.net/7dd52/

Answer 2

You just use div for each line and then animate that certain ...

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

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