Javascript 让div在页面加载时显示none，然后在函数运行时显示block

在一系列的动画中，我发现了一个小错误，我最终找出了它的原因。在所有的动画中，我都会运行延迟来对它们进行排序。对于这些div，我将它们设置为

display:none

，然后淡入淡入

对于这个特殊的动画，我将

切换

从它上面滑动一个“遮罩”，这样就不会像平常一样淡出任何东西。这导致了与我的其他div的重叠，我一直认为我有一个

z-index

问题。事实并非如此。我需要帮助了解如何在延迟处理之前保持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);
});

如果我拿出

$（'#home learn'）.css（'display'，'block'）然后什么也不显示。动画启动后（延迟后），如何让
home learn
显示


你好
我们是最佳的
设计
我们转变观念。。。
…变成现实。
我们为大公司和小公司建立美丽、吸引人的网站。
发现更多。。。
尝试设置JS函数以按顺序触发元素动画-

例如，如果您希望以DIV1>DIV2>DIV3>DIV4的形式加载div序列-

HTML

    <div class="class1 ani"></div>
    <div class="classwithanimation ani"></div>
    <div class="classafteranimation ani"></div>
    <div class="class4 ani"></div>

因此，在CSS文件中，您可以使用
display:none
&
position:absolute
属性合并任何要触发的CSS动画。“ani”JS确保只在加载前一个元素之后加载下一个元素

我知道这不是确切的解决方案，但我想您可以根据需要定制

谢谢
试试下面的方法

$("#curtain-div").delay(2000).toggle("slide", function(){
    $('#home-learn').css('display', 'block');
});

添加背景色

#home-learn {
    color: #FFF;
    background: blue none repeat scroll 0 0;
    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;
}

我们可以看到HTML吗？添加背景色，因为字体颜色为#FFF（白色）。
$("#curtain-div").delay(2000).toggle("slide", function(){
    $('#home-learn').css('display', 'block');
});

#home-learn {
    color: #FFF;
    background: blue none repeat scroll 0 0;
    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;
}