To highlight paragraph line by line you need to split the paragraph into lines first and then simply highlight the lines. To split the paragraph into lines you can re-build the paragraph word by word and end the line when it wraps on a second line, then start a new line.
See
http://jsfiddle.net/9UgEF/73/[
^]
Is that what you wanted?
$(function(){
splitTextIntoLines($("#test"));
$("#test span").each(function(i,e) {
$(e).delay(i*((5000)/$("#test span").length)).animate({'background-color': '#0f0'}, 100);
});
});
function splitTextIntoLines(obj) {
var lineHeight = null;
words = obj.text().split(" ").reverse(),
lines = [],
line = "",
word = "";
obj.html("");
while(words.length > 0) {
word = words.pop();
obj.append(word + " ");
if(lineHeight === null) {
lineHeight = obj.height();
}
if(obj.height() > lineHeight) {
words.push(word);
line = obj.html();
obj.html(line.substring(0, line.length - word.length - 1));
lines.push("<span>"+obj.html()+"</span>");
obj.html("");
}
}
lines.push("<span>"+obj.html()+"</span>");
obj.html(lines.join(""));
}