如何製作新行或向此Javascript功能添加HTML？

Question

我試圖創建一個打字機效果，我得到了一切工作，但我無法弄清楚如何創建一個新的行。

我已經嘗試了所有三：

\n 
\r 
<br /> 

，但它只是類型的字符。

這裏是我的javascript函數：

$.fn.Typewriter = function(opts){ 
    var $this = this, 
     defaults = { animDelay: 50 }, 
     settings = $.extend(defaults, opts); 
    $.each(settings.text, function(i, letter){ 
     setTimeout(function(){ 
      $this.html($this.html() + letter); 
     }, settings.animDelay * i); 
    }); 
} 

這裏是我怎樣，我稱之爲一個例子：

$('#howto').Typewriter({ 
animDelay: 100, 
text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, <br /> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. \r Ut enim ad minim veniam, quis nostrud exercitation \n ullamco laboris nisi ut aliquip ex ea commodo consequat.'}); 

這是怎麼最終看起來：

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." 

我希望它看起來像：

Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
Ut enim ad minim veniam, quis nostrud exercitation 
ullamco laboris nisi ut aliquip ex ea commodo consequat. 

所有幫助表示感謝！在串

http://jsfiddle.net/9Qsku/

Answer 1

使用\ n和修改snipplet這樣

$.fn.Typewriter = function(opts){ 
var $this = this, 
    defaults = { animDelay: 50 }, 
    settings = $.extend(defaults, opts); 
$.each(settings.text, function(i, letter){ 
    setTimeout(function(){ 
     $this.html($this.html() + (letter!='\n'?letter:'<br />')); 
    }, settings.animDelay * i); 
}); 
} 

Answer 2

<br/>應該很好地工作： http://jsfiddle.net/7WVZX/

[更新]這個問題可能是您要添加逐個字符，而不是整個添加換行符。這可能會爲你更好地工作：

$this.html(settings.text.substr(0,i)); 

結果：http://jsfiddle.net/9Qsku/1/

Answer 3

嘗試使用html的...

.html('Lorem ipsum dolor sit amet, <br> consectetur adipisicing elit,');