jQuery / javaScript - 在同一行逐个附加html字符串

Question

寻找一种逐字母缓慢渲染文本的方法（由于缺乏更好的描述），我遇到了this 解决方案。虽然这适用于纯文本，但我的问题是我想附加 html 字符串，即已经用 html 标记格式化的文本（<h1>、<p> 等）。由于使用 jQuery 的 apend()fundction 将每个字母打印在自己的行上，因此无法再将生成的文本解析为 html，我在 div 中得到的只是原始文本（带有可见的 html 标签）。

现在，有没有其他方法可以在避免换行的同时做到这一点？

我已经尝试在预填充我的文本的 div 的宽度上使用 jQuery 动画（请参阅here），但这看起来不像我想要的那样 - 当显示多行文本时它显示一次所有行，而我希望 ti 一个字母一个字母地呈现。

一如既往，提前感谢您，期待您的建议！

到目前为止我的代码：

function renderUI(levelId) {    
    [ unrelated code ]

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

    setTimeout(function() {
        $( "#introOverlay" ).slideDown(1000, function() {
            var target = $($("iframe").contents()).find("#ioMainLeft");
            var msg = target.html();
            target.html("");
            console.log(msg);
            showText(target, msg, 0, 16);
        });
    }, 3500);

    [ unrelated code ]
}

Answer 1

您在哪里寻找类似http://jsfiddle.net/4hqCJ/5/ 的东西？

var typeHiddenMsg = function (targetId, html, index, interval){
    if ( index == html.length ) return;

    $(targetId).html( html.substr(0,index) );

    setTimeout(function () {
        typeHiddenMsg(targetId, html, ++index, interval); 
    }, interval);
}

$(function () { 
  typeHiddenMsg("#target",$("#hidden_message").html(), 0, 100);    
});