使用jQuery键入文本动画

Question

hopefully someone can help me with this. I am kinda new to jQuery, but I'm trying to figure out a way to create an animated typing text effect for an entire div class! A long google search has only given me small plugins, although they are great... They just don't do what I need them to do… (or I just don't have the education to set it up)…

Basically, as soon as the page loads I need to have an entire pre-existing div class inside a block of html (I don't want the text to be provided by the JS) start to 'type' out the text as a human would, keeping all CSS of the internal elements (h1s, h2s, p, spans, etc.) and in the order that they are in the flow of the page.

This is the file I'm working on 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);

}());

Any help would be greatly appreciated!

Answer 1

You are almost there, if you want to see the effects of html tags use .html instead of .text() . Here is an updated fiddle .

Answer 2

Why don't use jQuery plugin such as Typed.js . It works perfect, the '<' and '>' won't display. You can also dive into the source code to find out how it work.

This is a demo (The string contains <br> and you can add some tag to test it).