javascript - 获取 fadeIn 元素以引发问题

Question

我有四个框显示在一行中(在较大的视口(viewport)中)。然后 fadeIn 框将在页面上移。我的问题是我无法弄清楚如何在不影响父 div 及其下面的代码部分 (#contact-social) 的情况下让这些框在页面上移动。我希望其他 div 留在他们应该在的完成位置(在框上升到页面之后)。

我怎样才能只改变框在页面上的位置而不影响其他任何东西？

我的位置

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 1

为了防止其他元素移动 - 缩小 margin top，你也应该分别增加 bottom margin ...

或者，不是为 margin 设置动画，而是添加一个 CSS 类来transition 你的样式:

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>