Though, the question is not very clear, but here is my attempt to give you initials, as per my understanding.
var sentence = $('div#content').text();
var words = sentence.split(' ');
var spanWords = [];
$(words).each(function(i,word){
if($.trim(word).length)
{
var span = $('<span>');
span.text(word);
spanWords.push(span)
spanWords.push(' ')
}
});
$('div#content').html(spanWords)
var start = function(element){
if(element.next().length){
setTimeout(function(){
element.css({color: "#000"});
start(element.next())
},1000);
}
element.css({color: "#f00"});
}
start($('div#content span:eq(0)'))
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='content'>
Hello world. you are beautiful.
</div>
1
solved Quicker way to animate each word of a sentence?