jquery - 兄弟 div 没有接受最高命令

Question

我的 div text-button 没有与我在其兄弟 div 下想要的正确边距对齐。我将 position: absolute; 设置到位，因为每次我将其设置为相对位置时，jQuery 动画都不起作用。我希望 text-button 出现在页面下方约 80% 的位置，然后动画显示高达 70% 或从同级 div margin-top 20% text 然后让它动画化 10%。

我做错了什么？

$(function textdelays(){
  $('#text-title').delay(600).fadeIn(1200);
  $('#text').delay(600).fadeIn(1200);
  $('#text-button').delay(900).fadeIn(1200);
  $('#text-button').animate({'top': '70%'}, 1000);
});

.gray {
  background-color: #CCC;
  width: 100%;
  height: 600px;
 }
 .content-wrap {
   margin: 10% 25%;
   position: absolute;
 }
 #text-title {
  color: blue;
  display: none;
  position: relative;
 /* margin: 0 25%;*/
  font-size: 1.3em;
 }
 #text {
  color: green;
  display: none;
  position: relative;
  margin-top: 5%;
  font-size: 1.1em;
 }
  #text-button {
   position: relative;
   wdith: 100%;
   top: 80%;
   display: none;
   cursor: pointer;
 }
 .border-span {
   border: 2px solid #000;
   padding: 15px 10px;
   color: #FFF;
   font-weight: bold;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="gray">
  <div class="content-wrap">
    <div id="text-title">fdsfdasfdaffasG<br>
    DIGITAL AGENCY</div>
    <div id="text">
    fdfdsf sdf asddd dddddd ddddd dddddd fdfsdaf dffdaf fdf fsda fdfas fdf dasaf f fdaa fdfdaf a  dfdffd  fdfffdffd fdfd dfdaad fda sd  adgdg dggagdg gdfgfg agf gfgfag fgfg gfag fggf fgfgag f gfg ag afgfgfgfga fg.
    </div>
    <div id="text-button"><span class="border-span">More About Us</span></div>
  </div>
</div>

Answer 1

不太确定我得到了你需要的东西:https://jsfiddle.net/ttfkg8ax/1/

我在您的按钮 div 上设置了 position:absolute; 并修复了 jQuery 和 CSS 上的 top:; 值。我希望我得到了你想要的结果。

jQuery:

$(function textdelays(){
  $('#text-title').delay(600).fadeIn(1200);
  $('#text').delay(600).fadeIn(1200);
  $('#text-button').delay(900).fadeIn(1200);
  $('#text-button').animate({'top': '120%'}, 1000);
});

CSS:

#text-button {
   position: absolute;
   width: 100%;
   top: 140%;
   display: none;
   cursor: pointer;
 }

由于以下原因，您必须设置 top:140%;:

您的text-button div 是您的content-wrap div 的子元素，它的大小正好是 lightblue 这个 JSFiddle 中的彩色 div:https://jsfiddle.net/ttfkg8ax/2/ .设置 top:140%; 会使您的按钮低于父 div 的大小的 40%。

要使您的按钮位于内您的content-wrap div 以便您能够使用top:80%; 那么您需要为 content-wrap 元素指定高度，如下所示:https://jsfiddle.net/ttfkg8ax/3/