Output word by word of paragraph using jQuery

Sam Deering

jQuery code snippet which outputs each word in a sentence at a specified interval. You can change the speed at which is outputs by the speed parameter in milliseconds. You can view the demo or load the code in jsfiddle below.

DEMO

jQuery

$(document).ready(function () {
    var $el = $('div'),
        text = $el.text(),
        speed = 1000; //ms

    $el.empty();

    var wordArray = text.split(' '),
        i = 0;

    INV = setInterval(function () {
        if (i >= wordArray.length - 1) {
            clearInterval(INV);
        }
        $el.append(wordArray[i] + ' ');
        i++;
    }, speed);
});

HTML

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi libero aliquam aut commodi illum fuga consequatur labore iste necessitatibus quidem atque aliquid iusto numquam tempora rerum excepturi officiis maiores. Ab?</div>

Load in jsfiddle

Typewriter Plugin

There is a really good typewriter jQuery plugin which acts like a Typewriter which may be of use.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.