Becky Becky - 7 months ago 13
HTML Question

Issue getting fadeIn element to raise

I have four boxes that are displayed in a single row (in a larger viewport). The boxes then

fadeIn
will going up the page. My issue is I cannot figure out how to get these boxes to go up the page without affecting the parent div and the sections of code below it (
#contact-social
). I want the other to divs to stay in their finished place that they are supposed to be in (after the boxes have went up the page).

How can I only change the positioning of the boxes as they go up the page without affecting anything else?

The position I have in my



function contactBox() {
$('.contact-connect-box').delay(600).animate({
'opacity' : 1,
'margin' : "0px 20px"
}, 800);
};
contactBox();

#contact-connect {
width: 80%;
height: auto;
margin: 0 10%;
padding: 80px 0;
}
.contact-connect-box {
width: 22%;
margin: 60px 20px 0 20px;
display: inline-block;
border: 1px solid black;
vertical-align: top;
opacity: 0;
}
#contact-social {
width: 100%;
height: 200px;
background: #F5F5F5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contact-connect">
<div class="contact-connect-box">
<h2 class="contact-connect-title">fda</h2>
<div class="contact-connect-description">fdsaf</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">fdsa</h2>
<div class="contact-connect-description">
Reach out to us
<br>
<div id="scroll" class="contact-connect-link">fdsaf</div>
</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">Visit</h2>
<div class="contact-connect-description">
fdsaf

</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">fdf</h2>
<div class="contact-connect-description">
<div class="contact-connect-link"><a href="http://facebook.com" target="_blank">fds</a></div>
<div class="contact-connect-link"><a href="http://youtube.com" target="_blank">fdsfe</a></div>
<div class="contact-connect-link"></div>
</div>
</div>
</div>
<div id="contact-social">

</div>




Answer

To prevent other elements move - making a margin top smaller, you should also increase the bottom margin respectively...

Or, instead of animating the margin, add a CSS class that will transition your styles :

function contactBox() {
  $('.contact-connect-box').addClass("fadeShow");
};
setTimeout(contactBox, 600);
#contact-connect {
  width: 80%;
  height: auto;
  margin: 0 10%;
  padding: 80px 0;
}
.contact-connect-box {
  width: 22%;
  margin: 60px 20px 0 20px;
  display: inline-block;
  border: 1px solid black;
  vertical-align: top;
  opacity: 0;
  transition:2s; -webkit-transition:2s; /* ADD THIS */
}

.contact-connect-box.fadeShow{ /* AND ALL OF THIS */
  opacity:1;
  transform:translateY(-30px); -webkit-transform:translateY(-30px);
}


#contact-social {
  height: 200px;
  background: #F5F5F5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contact-connect">
  <div class="contact-connect-box">
    <h2 class="contact-connect-title">fda</h2>
    <div class="contact-connect-description">fdsaf</div>
  </div>
  <div class="contact-connect-box">
    <h2 class="contact-connect-title">fdsa</h2>
    <div class="contact-connect-description">
      Reach out to us
      <br>
      <div id="scroll" class="contact-connect-link">fdsaf</div>
    </div>
  </div>
  <div class="contact-connect-box">
    <h2 class="contact-connect-title">Visit</h2>
    <div class="contact-connect-description">
      fdsaf

    </div>
  </div>
  <div class="contact-connect-box">
    <h2 class="contact-connect-title">fdf</h2>
    <div class="contact-connect-description">
      <div class="contact-connect-link"><a href="http://facebook.com" target="_blank">fds</a></div>
      <div class="contact-connect-link"><a href="http://youtube.com" target="_blank">fdsfe</a></div>
      <div class="contact-connect-link"></div>
    </div>
  </div>
</div>
<div id="contact-social">

</div>