Div在淡入淡出时闪烁答案

【问题标题】：Div flickering on fade in outDiv在淡入淡出时闪烁
【发布时间】：2015-06-07 01:52:34
【问题描述】：

我有两个文本作为介绍，其中 text1 消失而 text2 保留。问题是当 text1 消失时下面的内容 div 闪烁，当 text2 出现时又回到原来的位置。任何人都可以解决这个问题吗？这是我的小提琴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();

【问题讨论】：

标签： javascript jquery html css

【解决方案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;   
}

【讨论】：

【解决方案2】：

fadeOut() 隐藏 text1 div 。因此，当 text2 出现时，内容 div 会向上移动 500 毫秒，它会回到之前的位置。尝试使用容器 div

demo

<div class="container">
    <div class="text1 animated  zoomIn">Welcome to our site</div>
<div class="animated text2 bounceIn">Company Name</div>
</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>

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

.content { background:red}

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

【讨论】：

【解决方案3】：

必需的部分可以通过@Jasper's Answer 实现；即

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

但问题仍然存在，动画中出现水平滚动。为避免使用，

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

Working Demo

【讨论】：

嗯，宽度调整了..是可选的！！