Question

希望有人可以帮助我。我对jQuery有点新手，但是我试图想办法为整个div类创建一个动画类型文本效果！一个长期的谷歌搜索只给了我一些小插件，虽然他们很棒...他们只是不做我需要他们做的事情......（或者我只是没有接受过教育来设置它） ...

基本上，一旦页面加载，我需要在html块中包含一个完整的预先存在的div类（我不希望JS提供文本）开始'输出'作为人类的文本，保留内部元素的所有CSS（h1s，h2s，p，spans等），并按照它们在页面流中的顺序。

这是我正在处理的文件 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。

Answer 2

为什么不使用Typed.js之类的jQuery插件。它完美无缺，'＆lt;'和'＆gt;'不会显示。您也可以深入了解source code以了解其工作原理。

这是demo（字符串包含<br>，你可以添加一些标签来测试它。）

使用jQuery

2 个答案: