问题是获取fadeIn元素以引发

Question

我有四个框显示在一行中（在较大的视口中）。然后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

为防止其他元素移动 - 使边距变小，您还应分别增加底部边距...

或者，不是动画creator，而是添加一个Project样式的CSS类：

margin

transition

function contactBox() {
  $('.contact-connect-box').addClass("fadeShow");
};
setTimeout(contactBox, 600);