JQuery - Is innerHTML animation possible?

Question

I try to create a setTimeout function, and then modify innerHTML:

<script type="text/javascript"> $(document).ready(function(){ setTimeout(function(){ document.getElementById("middlecolor").innerHTML='new text new text'; }, 1000); }); </script> 

Question How could I animate the new text that appears, i.e. line by line, but not immediately recorded?

Thanks for any suggestions!

Answer 1

Line-to-line is a bit complicated, but possible .

 var ps = document.getElementById("text").children; var i = 0; var $p = $(ps[i]); setTimeout(function newline(){ $p.css("height", function(index, h){ h = parseInt(h); h += parseInt($p.css("line-height")); console.log(h, ps[i].scrollHeight); if (h > ps[i].scrollHeight) $p = $(ps[++i]); return h; }); if (i < ps.length) setTimeout(newline, 200); }, 200);​ 

I would suggest using a typewriter effect, which is also very nice: http://jsfiddle.net/pZb8W/1/

 var ps = document.getElementById("text").children; var i = 0; var $p, text; var speed = 20; setTimeout(function newchar(){ if (!text) { $p = $(ps[i++]); text = $p.text(); $p.empty().show(); } $p.append(document.createTextNode(text.charAt(0))); text = text.slice(1); if (text.length || i < ps.length) setTimeout(newchar, Math.random()*speed+speed); }, 3*speed);​ 

Answer 2

Try something like this:

 <div id="text"> </div> $(document).ready(function () { var interval = setInterval(function () { $('#text').append('<p style="display: none;">new text</p>'); $('#text p:last').fadeIn('slow'); }, 5000); }); 

See an example here.

If you want to kill the interval, you can do this:

 clearInterval(interval); 

CONGRATULATIONS.

Answer 3

Here's a function that animates across multiple lines of text one by one:

 <script type="text/javascript"> $(document).ready(function(){ function animateAddText(id, text, delta) { var lines = text.split("\n"); var lineCntr = 0; var target = $("#" + id); function addLine() { if (lineCntr < lines.length) { var nextLine = ""; if (lineCntr != 0) { nextLine = "<br>"; } nextLine += lines[lineCntr++]; $("<span>" + nextLine + "</span>").hide().appendTo(target).fadeIn(1000); setTimeout(addLine, delta); } } addLine(); } var multilineText = "First line\nSecond Line\nThird Line\nFourth Line\nFifth Line"; animateAddText("middlecolor", multilineText, 1000); }); </script> 

And a working demo: http://jsfiddle.net/jfriend00/Gcg5T/