jquery - 如何在逐字淡入时不使文本不是 "jumpy"？

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/ 进行测试