输入文字动画 [英] typing animated text

问题描述

我有文本里面DIV标签。是否有可能改变一个打字效果循环的文本内容，它的类型了，然后往后退删除信件和其他具有一个新的文本开始遍？这可能与jQuery的？

I have DIV tag with text inside. Is it possible to change the text content in a loop with a typing effect, where it types out, then goes backward deleting the letters and starting all over with a new text? Is this possible with jquery?

推荐答案

我的只是一个简单的方法，希望这会给你一些想法。结果
即使增加了humanizer，使之更加切合实际：）

Just a simple approach of mine, hope it will give you some ideas.
Even added a "humanizer" to make it more realistic :)

<大骨节病> 现场演示

var $el = $('.writer'),
    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);
}());

我知道这并不回答您的所有要求，但我不知道你是怎么计划添加新的文本字符串。您是否尝试过什么？

I know this does not answers all your requirements, but I don't know how you plan to add new text strings. Have you tried anything?

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