FadeIn div content one by one

FadeIn div content one by one

I have some content in div, basically div will be hide, now i want when i
press button the div content will be show with fadeIn function, now my
problem i want show the div content one by one means one alphabet fadeIn
then other but in my case it will be done word by word.
HTML
<div>
<span> THIS IS EXAMPLE OF FADE IN WORLD ONE BY ONE IN ALPHABETIC ORDER
</span>
</div>
<input type='button' value='click me'/>
JS
$("input[type=button]").click(function(){
$("div").show();
$("span").each(function(index) {
$(this).delay(400*index).fadeIn(300);
});
});
CSS
div
{
display:none
}