2

タイプライター効果を作成しようとすると、すべてが機能しましたが、新しい行を作成する方法がわかりません。

私は3つすべてを試しました：

\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/

4

3 に答える 3

2

文字列に\nを使用すると、このようにスニペットが変更されます

$.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);
});
}
于 2012-11-19T20:58:05.243 に答える
0

<br/>正常に動作するはずです：http： //jsfiddle.net/7WVZX/

[更新]改行を全体として追加するのではなく、文字を1つずつ追加していることが問題である可能性があります。これはあなたにとってよりうまくいくかもしれません：

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

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

于 2012-11-19T21:00:31.963 に答える
-1

.htmlを使用してみてください...

.html('Lorem ipsum dolor sit amet, <br> consectetur adipisicing elit,');
于 2012-11-19T21:01:18.057 に答える