javascript - Typewriter jQuery Effect を文字単位から単語単位に変更する

Question

この jQuery 関数は、文字ごとにうまく機能しますが、単語ごとにうまくいくようには見えません。

どんなアイデアでも、ここに機能があります：

//Typewriter Effect
$.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 1

$.each文字列を反復処理するために使用しないでください。.text代わりにテキストを設定するために使用してください.html。

効果を単一の文字から単語全体に変更するには、入力テキストを単語に分割するだけです。

$.fn.Typewriter = function(opts){
    var $this = this,
        defaults = { animDelay: 50 },
        settings = $.extend(defaults, opts),
        words = settings.text.split(/(?=\s)/), // split before every whitespace
        i = 0;
    function animate() {
        if (i==words.length) return;
        $this.text(words.slice(0, i++).join(''));
        setTimeout(animate, settings.animDelay);
    }
    animate();
}