Javascript 让两个单独的div同时延迟

我遇到了两个不同的问题

我要两个div同时开始延迟。我的

text按钮

div根本不会延迟

我正试图让我的

文本按钮

div在父div'gray'100px内向上动画，但它移动父div而不是

文本按钮

div

我做错了什么让这不起作用

$（函数（）{
$（'#text'）.delay（1000）.fadeIn（2200）；
$（“#文本按钮”）.delay（2000）.fadeIn（2200）；
$（“#文本按钮”）.animate（{'margin-top'：'50px'}，1000）；
});
.gray{
背景色：#CCC；
宽度：100%；
高度：500px；
}
#正文{
颜色：蓝色；
显示：无；
文本对齐：居中；
位置：绝对位置；
利润率：0.25%；
最高：40%；
字体大小：1.3em；
}
#文本按钮{
位置：相对位置；
边框：1px纯红；
wdith:100%；
/*显示：内联*/
线高：2米；
填充：0 10px；
文本对齐：居中；
最高：90%；
}

文本延迟。
文本延迟2
问题不在于
延迟
，而是div最初没有使用css隐藏-因此
fadeIn
没有影响

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

为了使底部文本的边框不会一直穿过，我只需将其包装成一个跨距，并在其上放置边框/填充css

总的来说是这样的：





文本延迟。
文本延迟2
文本按钮没有被css隐藏，我想如果你正在淡入，你会想这样做吗？哇，我错过了。您对动画有什么想法吗？快速看一下，您似乎最初使用的是相对定位和
top
，但随后您尝试更改边距。似乎您应该改为更改顶部的
。。。或者，可能使用嵌套在相对定位div中的div，并在该div中更改边距<代码>顶部
成功了。你知道我怎样才能使我的
文本按钮
边框不超过整个
宽度：100%
而不将宽度设置为较低的值吗？我希望这是响应性的，所以我不想为每个媒体查询设置特定的宽度。哦，我会将文本包装成一个span，然后将边框/填充css放入
#text button span
，而不是直接放在
#text button
…同时提醒您在CSST中拼写的
width
错误感谢您的帮助！！
$(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>