按字母显示文本字母 [英] Show text letter by letter

问题描述

使用CSS和JavaScript，以字母（例如视频游戏字幕）显示HTML文本字母的最优雅的方式是什么？

（例如，分割字符并使用 jQuery.append（）一个一个地打印它们），我希望有一些CSS3

如果解决方案考虑内部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）; 
 
}）; 
  
 
What is the most elegant way of showing an html text letter by letter (like videogame captions) using CSS and JavaScript?

While I'm sure that his can be solved using a brute-force approach (say, splitting the characters and print them one by one using jQuery.append()), I'm hoping there's some CSS3 (pseudo-elements?) or JQuery magic to do this more elegantly.

Extra points if the solution considers inner HTML content.
解决方案
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);
  }
}
Call with:
$(function () {

  showText("#msg", "Hello, World!", 0, 500);   

});


                        
这篇关于按字母显示文本字母的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！