Question

我想有一個確實的setTimeout函數，然後改變的innerHTML：

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

問題：我怎麼會動畫顯示的新文本，即一行行，而不是被寫入的所有立刻？

感謝您的任何建議！

Answer 1

行由行是有點棘手，但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);​ 

我建議用打字機的效果，這也是很討人喜歡：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

嘗試這樣：

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

見的例子here

如果你想殺死的間隔，可以這樣做：

clearInterval(interval); 

Greatings。

Answer 3

下面是會後，其他動畫文本，一個多行的函數：

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

和工作演示：http://jsfiddle.net/jfriend00/Gcg5T/