jquery - Use jQuery to create slowly filling text

Question

Possible Duplicate:
Show text letter by letter

Bit hard to explain but what I'm trying to achieve is add text to a div BUT I don't want it to simply appear or fadeIn etc. I want to be able to display the text a character at a time like if you were playing a text based game on the DS for example.

Answer 1

这是演示 http://www.thepixelart.com/demo/jticker/

这是可下载的文件 http://www.thepixelart.com/demo/jticker/files/jticker.zip

您可以修改计时器，以便在特定时间只出现一个角色

（或者）

html

<div id="text"><span>The intergalactic space agency</span></div>

css

div#text { 宽度：0px; 高度：2em；空白：nowrap；溢出：隐藏；}

jQuery

var spanWidth = $('#test span').width(); $('#text').animate( { width: spanWidth }, 1000 );

这是演示

http://jsfiddle.net/mrtsherman/6qQrN/1/

Answer 2

这是一种实现“打字机”效果的方法，就像您在视频游戏中看到的那样（使用纯 javascript，不需要 jQuery）：

<div id="text"></div>​

<script type="text/javascript">
    var textToAdd = "your text here";
    var placeHolder = 0;

    var textAdder = setInterval(function(){
        document.getElementById("text").innerHTML += textToAdd.charAt(placeHolder);
        if (++placeHolder == textToAdd.length){
            clearInterval(textAdder);
        }
    }, 100);
​&lt;/script>

演示