关于jquery:如何换行或将HTML添加到此Javascript函数?

我试图创建一个打字机效果,但一切正常,但我不知道如何创建新行。

我已经尝试了所有三个:

1
2
3
4
\

\
<br />

但是只键入那些字符。

这是我的JavaScript函数:

1
2
3
4
5
6
7
8
9
10
$.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);
    });
}

以下是我如何称呼它的示例:

1
2
3
4
5
$('#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. \
 Ut enim ad minim veniam, quis nostrud exercitation \
 ullamco laboris nisi ut aliquip ex ea commodo consequat.'
});

它的外观如下:

1
"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."

我希望它看起来像:

1
2
3
4
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/


使用\\
在字符串和代码片段上以这种方式修改

1
2
3
4
5
6
7
8
9
10
11
$.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!='\
'
?letter:'<br />'));
    }, settings.animDelay * i);
});
}


<br/>应该可以正常工作:
http://jsfiddle.net/7WVZX/

[更新]问题可能是您正在逐个添加字符,而不是整体添加换行符。这可能更适合您:

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

结果:http://jsfiddle.net/9Qsku/1/


尝试使用.html ...

1
.html('Lorem ipsum dolor sit amet,  consectetur adipisicing elit,');