Javascript 淡入淡出时Div闪烁

我有两个文本作为介绍，其中text1消失，text2保留。问题在于，当text1消失时，下面的content div会闪烁，而当text2出现时，content div会回到原来的位置。有人能解决这个问题吗？这是我的小提琴

HTML

JS:

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

我把一个容器放在你移动的物体周围，高度固定。因此，当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;   
}

欢迎来到我们的网站
公司名称
.集装箱{
高度：50px；
}

我把一个容器放在你移动的物体周围，高度固定。因此，当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;   
}

欢迎来到我们的网站
公司名称
.集装箱{
高度：50px；
}

我把一个容器放在你移动的物体周围，高度固定。因此，当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;   
}

欢迎来到我们的网站
公司名称
.集装箱{
高度：50px；
}

我把一个容器放在你移动的物体周围，高度固定。因此，当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;   
}

欢迎来到我们的网站
公司名称
.集装箱{
高度：50px；
}

fadeOut（）隐藏text1 div。因此，当text2出现时，content div向上移动500毫秒，并返回到以前的位置。尝试使用容器div

欢迎来到我们的网站
公司名称
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。
正文{padding top:30px；}
.text2{
显示：无；
}
.集装箱{
高度：50px；
}
.text1、.text2{
字体大小：30px；
字体大小：粗体；
文本转换：大写；
文本对齐：居中；
}
.content{背景：红色}
函数fade（）{
$（'.text1'）.fadeIn（）.delay（2000）.fadeOut（）；
$（'.text2'）.delay（2500.fadeIn（）；
}
褪色（）；

fadeOut（）隐藏text1 div。因此，当text2出现时，content div向上移动500毫秒，并返回到以前的位置。尝试使用容器div

欢迎来到我们的网站
公司名称
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。
正文{padding top:30px；}
.text2{
显示：无；
}
.集装箱{
高度：50px；
}
.text1、.text2{
字体大小：30px；
字体大小：粗体；
文本转换：大写；
文本对齐：居中；
}
.content{背景：红色}
函数fade（）{
$（'.text1'）.fadeIn（）.delay（2000）.fadeOut（）；
$（'.text2'）.delay（2500.fadeIn（）；
}
褪色（）；

fadeOut（）隐藏text1 div。因此，当text2出现时，content div向上移动500毫秒，并返回到以前的位置。尝试使用容器div

欢迎来到我们的网站
公司名称
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。
正文{padding top:30px；}
.text2{
显示：无；
}
.集装箱{
高度：50px；
}
.text1、.text2{
字体大小：30px；
字体大小：粗体；
文本转换：大写；
文本对齐：居中；
}
.content{背景：红色}
函数fade（）{
$（'.text1'）.fadeIn（）.delay（2000）.fadeOut（）；
$（'.text2'）.delay（2500.fadeIn（）；
}
褪色（）；

fadeOut（）隐藏text1 div。因此，当text2出现时，content div向上移动500毫秒，并返回到以前的位置。尝试使用容器div

欢迎来到我们的网站
公司名称
Lorem Ipsum只是印刷和排版行业的虚拟文本。自16世纪以来，Lorem Ipsum一直是行业标准的虚拟文本，当时一位不知名的印刷商拿起一个打印工具，将其拼凑成一本打印样本书。它不仅存活了五个世纪，而且还跨越到电子排版，基本上保持不变。它在20世纪60年代随着包含Lorem Ipsum段落的Letraset表单的发布而流行，最近随着Aldus PageMaker等桌面出版软件的发布，包括Lorem Ipsum版本。
正文{padding top:30px；}
.text2{
显示：无；
}
.集装箱{
高度：50px；
}
.text1、.text2{
字体大小：30px；
字体大小：粗体；
文本转换：大写；
文本对齐：居中；
}
.content{背景：红色}
函数fade（）{
$（'.text1'）.fadeIn（）.delay（2000）.fadeOut（）；
$（'.text2'）.delay（2500.fadeIn（）；
}
褪色（）；

通过@Jasper的回答可以实现所需的部分；i、 e

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

---

所需零件可通过@Jasper的Ans实现

.container {
  height: 50px;
  width : 95%;
}