Changing a Typewriter jQuery Effect from letter by letter to word by word

Question

This jQuery function works great letter by letter, but I cannot seem to get it to go word by word.

Any ideas, here is the function:

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

Thanks!

Answer 1

Don't use $.each to iterate over a string, and use .text for setting text instead of .html .

To change your effect from single chars to whole words, just split the input text into words:

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