I'm struggling to create a smooth fade-in effect word by word without causing the first word to suddenly jump to the left when the second word appears.
To better explain my issue, I've provided a jsfiddle link: http://jsfiddle.net/6czap/504/
If anyone could advise me on how to resolve this problem, I would greatly appreciate it. Thanks.
<div class="headline">
Digital Journalist
</div>
var $title = $(".headline:first"), text = $.trim($title.text()),
words = text.split(" "), html = "";
for (var i = 0; i < words.length; i++) {
html += "<span>" + words[i] + ((i+1) === words.length ? "" : " ") + " </span>";
};
$title.html(html).children().hide().each(function(i){
$(this).delay(i*900).fadeIn(700);
});
$title.find("span").promise().done(function(){
$el.text(function(i, text){
return $.trim(text);
});
});