CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Shahil Mohammed
Shahil Mohammed

Reputation: 3868

Div flickering on fade in out

I have two text as intro where text1 disappears and text2 stays. The problem is The content div below flickers when text1 disappears and goes back to its place when text2 appears. Could any one fix this issue ? Here is my 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();

Upvotes: 0

Views: 89

Answers (3)

Vikrant
Vikrant

Reputation: 5036

Required part is able to achieve with @Jasper's Answer; 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;   
}

but issue remains is horizontal scroll appearing on animation. To avoid it use,

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

Working Demo

Upvotes: 0

tkay
tkay

Reputation: 1726

fadeOut() hides the text1 div . So the content div moves up for 500ms when text2 appears it goes back to previous position. Try using a container 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();

Upvotes: 1

Jasper
Jasper

Reputation: 821

JSFiddle

I put a container around your moving elements with a fixed height. So when jQuery removes the child elements, the text element under them won't be affected.

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

Upvotes: 2

Related Questions