CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Paul
Paul

Reputation: 3368

Div is being pushed down once another div appears with a fadeIn()

I have included my code in a snippet. You will notice that the div text fades in first. Then the text-button div, finished by the logo-red-div. Whenever logo-red-div fades in, it moves down the text div. Why is it pushing that div down? I want these transitions to be smooth, and not with something being pushed down.

Thanks for the help.

$(function textdelays() {
  $('#logo-red-div').delay(2500).fadeIn(1200);
  $('#text').delay(300).fadeIn(1200);
  $('#text-button').delay(900).fadeIn(1200);
  $('#text-button').animate({
    'top': '60%'
  }, 1000);
});
.red {
	background-color: #ba5a45;
	width: 100%;
	height: 900px;
}
#logo-red-div {
  color: #FFF;
  font-size: 3em;
  text-align: center;
  top: 20%;
  position: relative;
  display: none;
}

#text {
  color: #FFF;
  display: none;
  text-align: center;
  position: relative;
  margin: 0 25%;
  top: 45%;
  font-size: 2.3em;
}

#text-button {
  position: relative;
  wdith: 100%;
  text-align: center;
  top: 80%;
  display: none;
  cursor: pointer;
}

.border-span {
  border: 2px solid #FFF;
  padding: 15px 10px;
  color: #FFF;
  font-weight: bold;
}

.border-span:hover {
  background-color: #FFF;
  color: #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="red">
  <div id="logo-red-div">Optimum Designs</div>
  <div id="text">We build beautiful, engaging sites and apps for companies both large and small.</div>
  <div id="text-button"><span class="border-span">More About Us</span></div>
</div>

Upvotes: 1

Views: 334

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240888

The reason you're seeing the element move down is because the #logo-red-div element is hidden with display: none initially, and then shown (thereby pushing the other elements down since the display is no longer set to none).

To fix this, replace display: none with opacity: 0 so that the element's height is accounted for, and then swap the .fadeIn() method with the .fadeTo() method in order to transition the opacity from 0 to 1.

Change:

$('#logo-red-div').delay(2500).fadeIn(1200);

to:

$('#logo-red-div').delay(2500).fadeTo(1200, 1);

Updated Snippet:

$(function textdelays() {
  $('#logo-red-div').delay(2500).fadeTo(1200, 1);
  $('#text').delay(300).fadeIn(1200);
  $('#text-button').delay(900).fadeIn(1200);
  $('#text-button').animate({
    'top': '60%'
  }, 1000);
});
#text,#text-button{position:relative;text-align:center;display:none}.red{background-color:#ba5a45;width:100%;height:900px}#logo-red-div{color:#FFF;font-size:3em;text-align:center;top:20%;position:relative;opacity:0}#text{color:#FFF;margin:0 25%;top:45%;font-size:2.3em}#text-button{wdith:100%;top:80%;cursor:pointer}.border-span{border:2px solid #FFF;padding:15px 10px;color:#FFF;font-weight:700}.border-span:hover{background-color:#FFF;color:#000}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="red">
  <div id="logo-red-div">Optimum Designs</div>
  <div id="text">We build beautiful, engaging sites and apps for companies both large and small.</div>
  <div id="text-button"><span class="border-span">More About Us</span>
  </div>
</div>

Upvotes: 2

Related Questions