在保持位置时使用jQuery淡入

我现在有什么

我目前有一些文本开始作为display:none，我使用jQuery fadeIn()的文本。我遇到的问题是，因为文本是居中的，当每个单词淡出时，单词在行的位置一直在移动(它们随着段落的增长而居中)。

我理解为什么会发生这种情况。我用的是display:none。所以，我要做的是使用invisibility:hidden来代替，这样所有的单词都保持它们在页面上的最终位置。

我的问题继续

我遇到的问题是，当我切换到invisibility:hidden时，我似乎找不到一种方法来淡化内容。我确实使用了这篇文章中的建议，但不幸的是，这似乎给了我和我现在一样的效果。

我希望有人能帮助我理解如何从隐藏中淡出而不移动元素。

<div class="center">    
<h1 id="cfs">Charles Samet</h1>
    <p class="intro">
        <span id="fade1">Husband.</span>
        <span id="fade2">  Father.</span>
        <span id="fade3">  Computer Geek.</span>
        <span id="fade4">  Welcome to my world...</span>
    </p>
</div>

.center {text-align:center}
#fade1, #fade2, #fade3, #fade4 {display:none; font-size:125%;}
#cfs {display:none}

$(document).ready(function() {
    $('#cfs').fadeIn(2500);
    $('#fade1').delay(3000).fadeIn(2000);
    $('#fade2').delay(5000).fadeIn(2000);
    $('#fade3').delay(7000).fadeIn(2000);
    $('#fade4').delay(9000).fadeIn(2000);           
});