以字母显示文字
什么是使用CSS和JavaScript通过字母（如video游戏字幕）显示html文本信件的最优雅的方式？
虽然我敢肯定，他可以用暴力方法解决（比如说，分割字符并使用jQuery.append()逐个打印），我希望有一些CSS3（伪元素？）或JQuery的魔术更优雅地做到这一点。
如果解决scheme考虑到内部HTML内容，则需要加分
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); });
如果一个顺利的揭示是合理的，那么我认为这应该是相当简单的。 未经testing，但这是我想象它会工作
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 );
好吧，我无法抗拒，做了一个小提琴。 一个小的代码错误，我修好了。 虽然看起来不错！
你真的应该append ，或显示/隐藏。
但是，如果出于某种奇怪的原因，你不想改变你的文本，你可以使用这个过于复杂的原因的一段代码：
HTML：
<p>I'm moving slowly...<span class="cover"></span></p>
CSS：
p { font-family: monospace; float: left; padding: 0; position: relative; } .cover { height: 100%; width: 100%; background: #fff; position: absolute; top: 0; right: 0; }
jQuery的：
var $p = $('p'), $cover = $('.cover'), width = $p.width(), decrement = width / $p.text().length; function addChar() { $cover.css('width', '-=' + decrement); if ( parseInt( $cover.css('width') ) < width ) { setTimeout(addChar, 300); } } addChar();
最后，这里是小提琴： http : //jsfiddle.net/dDGVH/236/
但是，严重的是，不要使用这个…
100％香草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);
当我这样做的时候，我遇到了一个字从一行尾跳到另一个字的问题，因为字母似乎绕过了我习惯的并排跨度，其中一个字是透明的，另一个可见，简单地将字母从不可见的跨度移动到可见的范围。 这是一个小提琴 。
HTML
<div class='wrapper'> <span class='visible'></span><span class='invisible'></span> </div>
CSS
.visible { color: black; } .invisible { color: transparent; }
JS
var text = "Whatever you want your text to be here", soFar = ""; var visible = document.querySelector(".visible"), invisible = document.querySelector(".invisible"); invisible.innerHTML = text; var t = setInterval(function(){ soFar += text.substr(0, 1), text = text.substr(1); visible.innerHTML = soFar; invisible.innerHTML = text; if (text.length === 0) clearInterval(t); }, 100)
我做了一个小jQuery的插件。 首先，如果javascript被禁用，则需要确保文本可见，如果不是，请逐字重新显示文本。
$.fn.retype = function(delay) { var el = this, t = el.text(), c = t.split(''), l = c.length, i = 0; delay = delay || 100; el.empty(); var interval = setInterval(function(){ if(i < l) el.text(el.text() + c[i++]); else clearInterval(interval); }, delay); };
用法将如此简单：
$('h1').retype();
这是基于armen.shimoon的：
var showText = function (target, message, index, interval) { if (index <= message.length && $(target).is(':visible')) { $(target).html(message.substr(0, index++)); setTimeout(function () { showText(target, message, index, interval); }, interval); } }
消息[索引++]不工作在我的jquery网页 – 我不得不将其更改为substr。 另外我的原始文本使用HTML和键入的文本使用HTML格式（br，b等）。 如果目标被隐藏，我也得到了停止的function。
您需要将每个字母换成span标签，因为匿名html元素不能被devise。 然后一次显示一个跨度。 这避免了一些innerText / innerHTML问题（没有DOM回stream？），但可以在你的情况下矫枉过正。
Vanillla
(function () { var showText = function(target, msg, index, interval){ var el = document.getElementById(target); if(index < msg.length){ el.innerHTML = el.innerHTML + msg.charAt(index); index = index + 1; setTimeout(function(){ showText(target,msg,index,interval); },interval); } }; showText("id", "Hello, World!", 0, 50); })();
你可以通过改变它来改进这个代码，所以你只能得到一次，因为它需要一些资源来修改DOM。
这里有一个很好的答案：这是一种你可以用任何.animate（）属性来操纵每个字母的方法，而不是像用s来覆盖文本那样的黑客。
我试图解决同样的问题，我想出了这个似乎工作的解决scheme。
HTML
<div id='target'></div>
jQuery的
$(function() { var message = 'Hello world'; var index = 0; function displayLetter() { if (index < message.length) { $('#target').append(message[index++]); } else{ clearInterval(repeat); } } var repeat = setInterval(displayLetter, 100); });
