title: Add css display block after a delay function
body: <p>In a sequence of animations I have a small bug I can't figure out. I am running delays for different parts of the animation to sequence them in. For those divs, I style them to <code>display:none</code> and then I fade them in after their delay.</p>
  
  <p>Well for this particular animation, I am toggle sliding a "mask" off of it, so not fading anything in like normal. This is causing an overlapping over my other divs to where I thought originally it was a z-index issue well, not that's not the case. The problem is, I am not displaying none because I am not initiallizing it with a <code>fadeIn</code>, so the <code>background-color</code> always shows and disrupts other elements.</p>
  
  <p>This is blue background overtop of the teal is the <code>background-color</code> of the <code>home-learn</code> div....</p>
  
  <p><a href="https://i.stack.imgur.com/lHWw8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lHWw8.png" alt="enter image description here"></a></p>
  
  <p>I need help figuring out how I keep my div <code>home-learn</code> displaying none until the delay has processed and then to display it somwhow.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>#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);
  });
  
  &lt;div id="home-learn"&gt;
          &lt;div id="curtain-div"&gt;&lt;/div&gt;
          Discover more...
      &lt;/div&gt;
  </code></pre>
  
  <p>I need to figure out how I can make <code>$('#home-learn').css('display', 'block');</code> work after the delay.</p>
  
  <p>If you need to see this live, comment below and I will add the site.</p>
  
  <p>UPDATE - ADDED HTML</p>
  
  <pre><code>&lt;div class="blue"&gt;
          &lt;div id="hand-wrap"&gt;&lt;img src="/images/hand.png" class="hand" alt="HELLO"&gt;&lt;/div&gt;
          &lt;span class="hand-text"&gt;HELLO&lt;/span&gt;
          &lt;div class="circle"&gt;
              &lt;div class="spinner top topright"&gt;&lt;/div&gt;
              &lt;div class="spinner top topleft"&gt;&lt;/div&gt;
              &lt;div class="spinner bottom bottomleft"&gt;&lt;/div&gt;
              &lt;div class="spinner bottom bottomright"&gt;&lt;/div&gt;
              &lt;div class="mask q2"&gt;&lt;/div&gt;
              &lt;div class="mask q4"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="circle-text"&gt;We're Optimum&lt;br&gt;Designs&lt;/div&gt;
          &lt;div class="aqua"&gt;
              &lt;div id="aqua-text1"&gt;We transform ideas...&lt;/div&gt;
              &lt;div id="aqua-text2"&gt;...into reality.&lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="blue-home-text"&gt;We build beautiful, engaging sites for companies both large and small.&lt;/div&gt;
          &lt;div id="home-learn"&gt;
              &lt;div id="curtain-div"&gt;&lt;/div&gt;
              Discover more...
          &lt;/div&gt;
  </code></pre>