sibling div 没有接受最高命令

Question

我的 div text-button 没有与我想要的其兄弟 div 下的正确边距对齐。我已将 position: absolute; 设置到位，因为每次我将其设置为相对时，jQuery 动画都不起作用。我希望 text-button 出现在页面下方约 80% 的位置，然后动画显示高达 70% 或者 margin-top 来自兄弟 div text 的 20% 然后让它动画化 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-buttondiv是你的content-wrapdiv的子元素，正好是lightblue 在这个 JSFiddle 中着色 div：https://jsfiddle.net/ttfkg8ax/2/。设置 top:140%; 会使您的按钮低于父按钮 div 其大小的 40%。

要让您的按钮落在内 content-wrap div 以便您能够使用 top:80%; 那么您需要指定content-wrap 元素的高度，像这样：https://jsfiddle.net/ttfkg8ax/3/

sibling div 没有接受最高命令

sibling div not taking top command

html

css

jquery

margin