javascript - Div 在淡入淡出时闪烁

Question

我有两个文本作为介绍，其中 text1 消失而 text2 保留。问题是下面的内容 div 在 text1 消失时闪烁，并在 text2 出现时返回到它的位置。任何人都可以解决这个问题吗？这是我的 fiddle http://jsfiddle.net/qdrtsvf3/1/

HTML

 <div class="text1 animated  zoomIn">Welcome to our site</div>
    <div class="animated text2 bounceIn">Company Name</div>

<div class="content">
 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>

CSS:

body { padding-top:30px;}
.text2 {
    display: none;
}
.text1,.text2 {
    font-size:30px;
    font-weight:bold;
    text-transform:uppercase;
    text-align:center;
}

.content { background:red}

JS:

function fade() {
        $('.text1').fadeIn().delay(2000).fadeOut();
        $('.text2').delay(2500).fadeIn();
    }
    fade();

Answer 1

JSFiddle

我在移动元素周围放置了一个固定高度的容器。所以当 jQuery 移除子元素时，它们下面的文本元素不会受到影响。

<div class="container">
<div class="text1 animated  zoomIn">Welcome to our site</div>
<div class="animated text2 bounceIn">Company Name</div>
</div>

.container {
 height: 50px;   
}