我如何使这个ghostType jQuery函数做换行符？

Question

I'm playing around with a jquery function called ghostType which basically types out text as though it is being typed on screen. Its kinda cool, but I can't seem to have it do line breaks.

The jquery is as follows:

(function( $ ){
  $.fn.ghostType = function() {

    return this.each(function() {

        var $this = $(this);
        var str = $this.text();
        $this.empty().show();
        str = str.split("");
        str.push("_");

        // increase the delay to ghostType slower
        var delay = 100;

        $.each(str, function (i, val) {
            if (val == "^") {
                // Do nothing. This will add to the delay.
            }
            else {
                $this.append('<span>' + val + '</span>');
                $this.children("span").hide().fadeIn(100).delay(delay * i);

            }
        });
        $this.children("span:last").css("textDecoration", "blink");

    });

};
})( jQuery );

From what I can tell this code takes each character in the chosen elements TEXT and puts it into seperate tags, therefor omitting the HTML (ie br's) with the line var str = $this.text();

How would you go about making this code include line breaks?

The best I could come up with was by adding an extra 'else if' statement like so:

            else if ( val == "*" ) {
                $this.append('<br />');
            }

And therefor * signs would become line breaks... but this damages the functionality where blinking cursor doesn't sit beside each letter as it fades in. otherwise, it works...

You can see an example of what I've done at http://jsfiddle.net/JNyQV/

Answer 1

(function( $ ){
$.fn.ghostType = function() {

    return this.each(function() {

        var $this = $(this);
        var str = $this.text();
        $this.empty().show();
        str = str.split("");
        str.push("_");

        // increase the delay to ghostType slower
        var delay = 55;

        $.each(str, function (i, val) {
            if (val == "^") {
                // Do nothing. This will add to the delay.
            }
            else {
                if (val == "*") val = "<br/>";
                $this.append('<span>' + val + '</span>');
                $this.children("span").hide().fadeIn(100).delay(delay * i);

            }
        });
        $this.children("span:last").css("textDecoration", "blink");

    });

};
})( jQuery );

$('#example').ghostType();

Answer 2

Your best bet is to treat the selected element as an element, and not just simply grab its text.

Here is an excerpt from one of my plugins that handles text...

var findText = function(element, pattern, callback) {
    for (var childi= element.childNodes.length; childi-->0;) {
        var child= element.childNodes[childi];
        if (child.nodeType==1) {
            findText(child, pattern, callback);
        } else if (child.nodeType==3) {
            var matches= [];
            var match;
            while (match= pattern.exec(child.data))
                matches.push(match);
            for (var i= matches.length; i-->0;)
                callback.call(window, child, matches[i]);
        }
    }
}

I originally got this piece of code from an answer here by bobince .

By examining the rest of my plugin , you should be able to pick up how it works. Basically, it iterates over all text nodes recursively, wrapping each character in a span which is later animated.

Answer 3

This is how I would write the script... just add the entire partial string instead of each individual letter. The biggest difference is that the last letter doesn't fade in. I didn't think the effect was that noticeable, but it should be possible to just add the last letter and have that fade in if it is a necessity. Here is a demo .

(function($) {
    $.fn.ghostType = function() {

        return this.each(function() {

            // increase the delay to ghostType slower
            var delay = 55,

            $this = $(this),
            str = $this.text(),
            i = 0,
            l = str.length,
            t,
            loop = function() {
                if (i <= l) {
                    t = str.substring(0,i++).replace(/\^/g, '').replace(/\*/g, '<br>');
                    $this.html(t + '<span class="blink" >_</span>');
                    setTimeout(loop, delay);
                }
            };

            $this.empty().show();
            loop();
        });

    };
})(jQuery);

$('#example').ghostType();