Jquery – Animate innerHTML posible?

Estoy tratando de tener una función que establezca TimeTimeout y luego cambie innerHTML:

 $(document).ready(function(){ setTimeout(function(){ document.getElementById("middlecolor").innerHTML='new text new text'; }, 1000); });  

Pregunta : ¿Cómo podría animar el nuevo texto que aparece, es decir, línea por línea, en lugar de escribir todo de una vez?

Gracias por cualquier sugerencia !!

Línea por línea es un poco complicado, pero posible .

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

Sugeriría usar un efecto de máquina de escribir, que también es muy agradable: 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);​ 

Pruebe algo como esto:

 
$(document).ready(function () { var interval = setInterval(function () { $('#text').append('

new text

'); $('#text p:last').fadeIn('slow'); }, 5000); });

Mira el ejemplo aquí

Si quieres matar el intervalo, puedes hacer esto:

 clearInterval(interval); 

Grandes.

Aquí hay una función que animaría en múltiples líneas de texto, una después de la otra:

  

Y una demostración funcional: http://jsfiddle.net/jfriend00/Gcg5T/