How do I make this ghostType jquery function do line breaks?
<p>I'm playing around with a jquery function called <a href="http://ghosttype.com" rel="nofollow">ghostType</a> 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.</p>

<p>The jquery is as follows:</p>

<pre><code>(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('&lt;span&gt;' + val + '&lt;/span&gt;');
                $this.children("span").hide().fadeIn(100).delay(delay * i);

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

    });

};
})( jQuery );
</code></pre>

<p>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();</p>

<p>How would you go about making this code include line breaks?</p>

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

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

<p>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...</p>

<p>You can see an example of what I've done at <a href="http://jsfiddle.net/JNyQV/" rel="nofollow">http://jsfiddle.net/JNyQV/</a></p>
