使用jQuery创建缓慢填充文本

Question

可能重复： Show text letter by letter

有点难以解释，但我试图实现的是添加文本到一个div，但我不希望它只是出现或fadeIn等。我希望能够显示文字字符在一个时间，如果你正在玩一个文字的游戏基础上的DS。

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；空白:现在；溢出:隐藏；}

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

DEMO