Javascript 在延迟功能后添加css显示块

在一系列动画中，我有一个小错误，我想不出来。我正在为动画的不同部分运行延迟，以便将它们按顺序排列。对于这些div，我将它们设置为

display:none

，然后在延迟后淡入

对于这个特殊的动画，我将滑动一个“遮罩”，这样就不会像正常情况一样淡入任何东西。这导致了与我的其他div的重叠，我原本以为这是一个z-index问题，但事实并非如此。问题是，我没有显示none，因为我没有使用

fadeIn

初始化它，因此

背景色始终显示并中断其他元素

这是蓝色背景，蓝绿色的顶部是
家庭学习
div的
背景色


我需要帮助，弄清楚我如何保持我的div
home learn
在延迟处理之前不显示任何内容，然后将其显示为whow

代码如下：

#home-learn {
    color: #FFF;
    position: absolute;
    text-align: center;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 2.3em;
    z-index: 99;
    display: none;
}
#curtain-div {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #0085A1;
  top: 0;
  left: 0;
  z-index: 1;
}   

$(function(){
    $('#home-learn').css('display', 'block');
    $("#curtain-div").delay(15800).toggle("slide", {
        direction: "right"
      }, 1000);
});

<div id="home-learn">
        <div id="curtain-div"></div>
        Discover more...
    </div>

关于这个问题：

我需要弄清楚如何制作
$（'#home learn'）.css（'display'，'block'）延迟后工作

使用以下方法在延迟方法之后添加行：

编辑
为了证明这一点，我在这里加了一把小提琴：


您必须看到蓝色框在延迟4秒后出现。那很好用

第二次编辑
由于下面的评论，请尝试使用以下内容进行更改：

$("#curtain-div").delay(15800).queue(function() {
     $('#home-learn').css('display', 'block');
     $(this).toggle("slide", {
          direction: "right"
     }, 1000);
});

第三次编辑
正如我们在评论中所说，所有问题都是通过
next
参数解决的。整个代码：

$("#curtain-div").delay(15800).queue(function(next) {
     $('#home-learn').css('display', 'block');
     next();
}).toggle("slide", {
     direction: "right"
}, 1000);

关于这个问题：

我需要弄清楚如何制作
$（'#home learn'）.css（'display'，'block'）延迟后工作

使用以下方法在延迟方法之后添加行：

编辑
为了证明这一点，我在这里加了一把小提琴：


您必须看到蓝色框在延迟4秒后出现。那很好用

第二次编辑
由于下面的评论，请尝试使用以下内容进行更改：

$("#curtain-div").delay(15800).queue(function() {
     $('#home-learn').css('display', 'block');
     $(this).toggle("slide", {
          direction: "right"
     }, 1000);
});

第三次编辑
正如我们在评论中所说，所有问题都是通过
next
参数解决的。整个代码：

$("#curtain-div").delay(15800).queue(function(next) {
     $('#home-learn').css('display', 'block');
     next();
}).toggle("slide", {
     direction: "right"
}, 1000);

您需要
setTimeout
@Tushar在这种情况下如何使其工作？您需要
setTimeout
@Tushar在这种情况下如何使其工作？但这并不显示div。我认为css显示块不起作用，它工作得很好。根据您的HTML，您可能有错误的标记。分享HTML，因为这个答案非常有效。这不再显示背景色，只是文字在应该或根本不显示的时候不显示。在这里看现场直播：。。。。您看到圆圈箭头的最后一个序列是文本“发现更多”应该出现的位置。在您的live站点中，我看到
#home learn
在
样式
属性中设置了
显示：block
，那么这个答案就行了。另一件事是为什么没有出现，这是由文本上方的
#窗帘div
生成的。如果你移除
你会看到魔法！！！文本是显示的。是的，它取决于jQuery，而不是您使用的设备。不过，它不显示div。我认为css显示块不起作用，它工作得很好。根据您的HTML，您可能有错误的标记。分享HTML，因为这个答案非常有效。这不再显示背景色，只是文字在应该或根本不显示的时候不显示。在这里看现场直播：。。。。您看到圆圈箭头的最后一个序列是文本“发现更多”应该出现的位置。在您的live站点中，我看到
#home learn
在
样式
属性中设置了
显示：block
，那么这个答案就行了。另一件事是为什么没有出现，这是由文本上方的
#窗帘div
生成的。如果你移除
你会看到魔法！！！显示文本。是的，它取决于jQuery，而不是您正在使用的设备