Word Fader

by stichoza

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div>
    Hello, I'm
    <span class="flyer">
        <span>One</span>
        <span>Two</span>
        <span>Three</span>
        <span>Four</span>
        <span>Five</span>
        <span>Six</span>
    </span>
</div>

CSS

div {
    font-size: 2em;
    padding: 10px;
}

JavaScript

$('.flyer>span:not(:first-child)').hide();
var count = 1;
setInterval(function() {
    var objs = $('.flyer>span');
    objs.hide();
    $(objs[count % objs.length]).fadeIn();
    count++;
}, 1000);