Question

我的div text-button没有与我兄弟div下想要的正确边距对齐。我设置了position: absolute;因为每次我将它设置为相对时，jQuery动画都不起作用。我希望text-button在页面上显示大约80％，然后动画高达70％或者从兄弟div margin-top获得20％的text，然后让它生动起来10％。

我做错了什么？

＆＃13;

$(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);
});

＆＃13;

.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;
 }

＆＃13;

<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>

＆＃13;

Answer 1

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

我在按钮position:absolute;上设置了div并修复了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是<{1}} div的子元素，这正是此JSFiddle中content-wrap彩色div的大小：{{ 3}}。设置lightblue会使您的按钮在父级div下方缩小40％。

要使您的按钮在<{1}} div中 ，以便您能够使用top:140%;，则需要指定content-wrap的高度元素，如：https://jsfiddle.net/ttfkg8ax/2/

sibling div没有采取最高命令

1 个答案: