Question

我遇到了两个不同的问题。

我希望两个div同时开始延迟。我的text-button div根本没有延迟。
我试图让我的text-button div在父div“灰色”100px内动画显示，但它会移动父div而不是text-button div。

我为此做错了什么？

$(function(){
$('#text').delay(1000).fadeIn(2200);
$('#text-button').delay(2000).fadeIn(2200);
$('#text-button').animate({'margin-top': '50px'}, 1000);
});

.gray {
  background-color: #CCC;
  width: 100%;
  height: 500px;
 }
#text {
  color: blue;
  display: none;
  text-align: center;
  position: absolute;
  margin: 0 25%;
  top: 40%;
  font-size: 1.3em;
 }
 #text-button {
   position: relative;
   border: 1px solid red;
   wdith: 100%;
   /*display: inline;*/
   line-height: 2em;
   padding: 0 10px;
   text-align: center;
   top: 90%;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="gray">
  <div id="text">text delay.</div>
  <div id="text-button">text delay 2</div>
</div>

Answer 1

问题不在于delay，而且div最初并不是用css隐藏的 - 所以fadeIn没有任何影响。

移动div的问题在于您使用top的相对定位，然后尝试更改边距。有几种方法可以做到这一点。一个只是改变top。

为了使底部文本的边框不会一直穿过，我只需将其包裹在一个范围内并将边框/填充css放在那个...

所有这些都是这样的：

JSFiddle

$(function() {
  $('#text').delay(1000).fadeIn(2200);
  $('#text-button').delay(2000).fadeIn(2200);
  $('#text-button').animate({
    'top': '80%'
  }, 1000);
});

.gray {
  background-color: #CCC;
  width: 100%;
  height: 300px;
}

#text {
  color: blue;
  display: none;
  text-align: center;
  position: absolute;
  margin: 0 25%;
  top: 40%;
  font-size: 1.3em;
}

#text-button {
  position: relative;
  width: 100%;
  display: none;
  text-align: center;
  top: 90%;
}

#text-button span {
  border: 1px solid red;
  line-height: 2em;
  padding: 0 10px;
}

<div class="gray">
  <div id="text">text delay.</div>
  <div id="text-button"><span>text delay 2</span></div>
</div>

让两个单独的div同时延迟

1 个答案: