javascript - 将打字机 jQuery 效果从逐个字母更改为逐个单词

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();
}