Question

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

现在，还有其他方法可以避免换行吗？

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

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

到目前为止我的代码：

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);    
});

jQuery / javaScript - 在同一行上追加html字符串char-by-char

1 个答案: