javascript - 使用 jQuery 打字动画

Question

希望有人能帮我解决这个问题。我是 jQuery 的新手，但我想找出一种方法来为整个 div 类创建动画打字文本效果!长时间的谷歌搜索只给了我一些小插件，虽然它们很棒......他们只是不做我需要他们做的......(或者我只是没有接受过设置它的教育)......

基本上，一旦页面加载，我需要在一个 html block 中有一个完整的预先存在的 div 类(我不希望 JS 提供文本)开始“键入”文本像人类一样，保留内部元素(h1s、h2s、p、span 等)的所有 CSS，并按照它们在页面流中的顺序排列。

这是我正在处理的文件 http://jsfiddle.net/we9d81jf/

var $el = $('.typing'),
    txt = $el.text(),
    txtLen = txt.length,
    timeOut,
    char = 0;

$el.text('|');

(function typeIt() {   
    var humanize = Math.round(Math.random() * (200 - 30)) + 30;
    timeOut = setTimeout(function() {
        char++;
        var type = txt.substring(0, char);
        $el.text(type + '|');
        typeIt();

        if (char == txtLen) {
            $el.text($el.text().slice(0, -1)); // remove the '|'
            clearTimeout(timeOut);
        }

    }, humanize);

}());

如有任何帮助，我们将不胜感激!

Answer 1

你就快完成了，如果你想看到 html 标签的效果，请使用 .html 而不是 .text()。 这是更新的 fiddle .