逐字显示文字

Question

使用CSS和JavaScript逐字显示html文本(如视频游戏字幕)的最优雅方式是什么？

虽然我确信他可以使用蛮力方法解决(比如,分割字符并逐个打印它们jQuery.append()),我希望有一些CSS3(伪元素？)或JQuery魔术来做到这一点更优雅.

如果解决方案考虑内部HTML内容,则为额外点.

Answer 1

HTML

<div id="msg"/>

使用Javascript

var showText = function (target, message, index, interval) {   
  if (index < message.length) {
    $(target).append(message[index++]);
    setTimeout(function () { showText(target, message, index, interval); }, interval);
  }
}

致电:

$(function () {
  showText("#msg", "Hello, World!", 0, 500);   
});

Answer 2

如果顺利的揭示是合理的,那么我认为这应该是非常简单的.未经测试,但这是我想象它会起作用

HTML

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

CSS

div#text { width: 0px; height: 2em; white-space: nowrap; overflow: hidden;  }

jQuery的

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

好吧,我无法抗拒并成了小提琴.我修复了一个小代码错误.虽然看起来不错!

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

Answer 3

100% vanilla javascript，严格模式，不显眼的 html，

function printLetterByLetter(destination, message, speed){
    var i = 0;
    var interval = setInterval(function(){
        document.getElementById(destination).innerHTML += message.charAt(i);
        i++;
        if (i > message.length){
            clearInterval(interval);
        }
    }, speed);
}

printLetterByLetter("someElement", "Hello world, bonjour le monde.", 100);