javascript - 在保持位置时逐渐使用 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/