javascript - 在延迟功能后添加 css 显示 block

Question

在一系列动画中，我有一个我无法弄清楚的小错误。我正在为动画的不同部分运行延迟以对它们进行排序。对于那些 div，我将它们设置为 display:none，然后在延迟后淡入。

好吧，对于这个特定的动画，我正在切换滑动一个“面具”，所以不会像往常一样淡化任何东西。这导致我的其他 div 重叠到我最初认为是 z-index 问题的地方，但事实并非如此。问题是，我没有显示任何内容，因为我没有使用 fadeIn 初始化它，所以 background-color 总是显示并干扰其他元素。

这是 home-learn div 的 background-color 的蓝色背景......

我需要帮助弄清楚如何让我的 div home-learn 不显示，直到处理完延迟，然后再以某种方式显示它。

代码如下:

#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'); 在延迟后工作。

如果您需要现场观看，请在下方评论，我会添加该站点。

更新 - 添加了 HTML

<div class="blue">
        <div id="hand-wrap"><img src="/images/hand.png" class="hand" alt="HELLO"></div>
        <span class="hand-text">HELLO</span>
        <div class="circle">
            <div class="spinner top topright"></div>
            <div class="spinner top topleft"></div>
            <div class="spinner bottom bottomleft"></div>
            <div class="spinner bottom bottomright"></div>
            <div class="mask q2"></div>
            <div class="mask q4"></div>
        </div>
        <div id="circle-text">We're Optimum<br>Designs</div>
        <div class="aqua">
            <div id="aqua-text1">We transform ideas...</div>
            <div id="aqua-text2">...into reality.</div>
        </div>
        <div id="blue-home-text">We build beautiful, engaging sites for companies both large and small.</div>
        <div id="home-learn">
            <div id="curtain-div"></div>
            Discover more...
        </div>

Answer 1

对于这个问题:

I need to figure out how I can make $('#home-learn').css('display', 'block'); work after the delay.

在延迟方法后面添加一行 queue()方法:

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

编辑

为了证明这是有效的，我在这里添加了一个 fiddle :

https://jsfiddle.net/4vLLnxt1/

您必须在延迟 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);