如何在文字逐漸消失時不讓文字「跳動」？

Question

我遇到的問題是逐字逐漸消失，而第一個單詞出現時，第一個單詞突然跳到左側。

我已經包含了jfiddle來展示我的意思。 http://jsfiddle.net/6czap/504/

如果有人能告訴我如何修復它，我將不勝感激。謝謝。

<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); 
    });    
}); 

Answer 1

這是因爲

body { 
    text-align: centre; 
} 

當添加了一個新詞， '中心' 將被重新計算。

另請注意，您爲<a>分配了一個類，但未使用它。

嘗試使用保證金，而不是文字對齊的：

.subtitle { 
    margin-left: 40%; 
} 

測試它在http://jsfiddle.net/kdgm6rcm/1/