Question

我有两个文本作为介绍，其中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();

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

Answer 2

fadeOut（）隐藏了text1 div。因此，当text2出现时，内容div会向上移动500ms，然后返回上一个位置。尝试使用容器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();

Answer 3

要求部分能够通过@Jasper的答案实现;即

<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

淡出闪烁的Div闪烁

3 个答案: