如何为此Javascript函数创建新行或添加HTML？

我试图创建一个打字机效果，我让一切正常，但我无法弄清楚如何创建一个新的线。

我试过这三个：

\n \r 
 

但它只是键入这些字符。

这是我的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, 
 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:'
')); }, settings.animDelay * i); }); } 

Answer 2


应该工作正常： 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, 
 consectetur adipisicing elit,');