È possibile animare ogni riga di testo con jquery?

Question

È possibile visualizzare il testo una riga alla volta in jquery? So che può essere fatto in flash, ho un esempio qui http://iliketoplay.dk/#/blog/deff. Durante la riproduzione del video, il mouse fa clic su un cerchio che apre una finestra che contiene del testo, ma ogni riga di testo viene visualizzata una alla volta con un effetto dall'aspetto davvero interessante. Può essere ricreato?

Answer 1

Questo non dovrebbe essere un problema, ma la soluzione dipende dal vostro formato di input. È necessario pezzo il testo in linee che può essere fatto in questo modo:

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

allora si può fare qualcosa con ogni riga come volete, esempio:

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

Vedi un esempio completo qui: http://jsfiddle.net/7dd52/

Answer 2

è sufficiente utilizzare div per ogni linea e quindi animate che certo ...

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

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