I'm playing around with a jquery function called [ghostType](http://ghosttype.com) 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/>