Question

我目前有什么

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

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

我的问题向前推进

我遇到的问题是，当我切换到invisibility:hidden时，我似乎无法找到淡出内容的方法。我确实使用了此帖中提出的建议{{ 3}}，但不幸的是，这似乎给了我与目前相同的效果。

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

我的代码

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演示：HERE

以下是我尝试过的CodePen，使用隐身：隐藏，但没有成功：http://codepen.io/anon/pen/xocyw/

Answer 1

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

CSS

element {
    opacity: 0;
}

的jQuery

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

请在此处查看：http://jsfiddle.net/H6jts/

顺便说一下。没有规则invisibility，但visibility。

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

在保持位置的同时淡入使用jQuery

我目前有什么

我的问题向前推进

我的代码

1 个答案: