在保持位置时淡入使用jQuery

Question

我目前拥有的

我目前有一些以display:none 开头的文本，我使用jQuery 来fadeIn() 文本。我遇到的问题是，由于文本居中，随着每个单词的淡入，行中单词的位置不断移动（它们随着段落的增长而居中）。

我明白为什么会发生这种情况。我正在使用display:none。所以，我想做的是改用invisibility:hidden，这样所有的词都保持在页面上的最终位置。

我的问题向前推进

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

我希望有人可以帮助我了解如何在不移动元素的情况下从隐藏中淡入。

我的代码

HTML

<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>

CSS

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

jQuery

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

这是当前功能的 CodePen 演示：http://codepen.io/anon/pen/xocyw/

这是我尝试过的 CodePen，使用 invisibility:hidden，但没有成功：http://codepen.io/anon/pen/KdlHJ/

Answer 1

您需要为不透明度设置动画。这样您就可以避免使用display: none 并获得相同的结果。

CSS

element {
    opacity: 0;
}

jQuery

$(element).animate({opacity: 1});

在这里查看：http://jsfiddle.net/H6jts/

顺便说一句。没有规则invisibility，而是visibility。

---

这是您的示例的工作版本：http://jsfiddle.net/3js5e/