获取要引发的fadeIn元素时出现问题

Issue getting fadeIn element to raise

本文关键字：问题 元素 fadeIn 获取      更新时间：2023-09-26

我有四个框显示在一行中（在较大的视口中）。然后fadeIn的框将向上翻页。我的问题是，我无法弄清楚如何在不影响父div及其下面的代码部分（#contact-social）的情况下让这些框进入页面。我希望其他人留在他们应该呆的地方（在盒子上了页面之后）。

如何在不影响其他内容的情况下，仅在框向上翻页时更改框的位置？

我在中的位置

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>

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

或者，不设置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>

相关文章：