CODEWITHSUNDEEP
jquery
Hellodan
Hellodan

Reputation: 1208

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

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?

Upvotes: 6

Views: 3338

Answers (2)

Jørgen
Jørgen

Reputation: 9130

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/

Upvotes: 5

genesis
genesis

Reputation: 50972

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

Upvotes: 1

Related Questions