Is it possible to animate every line of text using jquery?

Question

Is it possible to expand the text one line at a time during jquery? I know that this can be done in flash. I have an example here http://iliketoplay.dk/#/blog/deff . When playing a video, the mouse clicks on a circle that opens a field containing text, but each line of text is displayed one at a time with an effect that looks really cool. Is it possible to recreate it?

Answer 1

This should not be a problem, but the solution depends on your input format. You need to select the text in the lines, which can be done as follows:

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

Then you can do something with each line however you want, for example:

 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 the full example here: http://jsfiddle.net/7dd52/

Answer 2

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

 <div class="first">first line</div> <div class="second">second</div> $(".first").animate({'left':'-15px'}, 1000);