title: Jquery z-index, Strange behaviour on trigger buttons
body: <p>I don't know how to ask this question but i'll start with my code.
  here is the HTML and js</p>
  
  <pre><code>    &lt;html&gt;
          &lt;head&gt;
              &lt;link rel="stylesheet" href="style.css"&gt;
              &lt;script src="http://code.jquery.com/jquery-latest.min.js"   type="text/javascript"&gt;&lt;/script&gt;
          &lt;/head&gt;
  
          &lt;body&gt;
          &lt;div id="behind-bg"&gt;&lt;/div&gt;
              &lt;div id="code" class="code"&gt;
  
                  &lt;a id="testlink" href="#"&gt;Click Here&lt;/a&gt;&lt;br&gt;
                  &lt;a id="testlink" href="#"&gt;Click Here&lt;/a&gt;&lt;br&gt;
                  &lt;a id="testlink" href="#"&gt;Click Here&lt;/a&gt;
  
  
              &lt;/div&gt;
                  &lt;div id="curl" class="curl"&gt;&lt;/div&gt;
              &lt;div id="check-box-float"&gt;
  
  
  
              &lt;div id="open" class="toggle-menu"&gt;
              &lt;div id="close" class="toggle-menu"&gt;
              &lt;/div&gt;
  
  
          &lt;/body&gt;
  
          &lt;script&gt;
              $(function() { 
                  $("#open").click(function() { 
                      $(".curl").toggleClass("curl-out"); 
                  }); 
              }); 
  
              $(function() { 
                  $("#open").click(function() { 
                      $(".code").toggleClass("menu-reveal"); 
                  }); 
              }); 
  
              $(function() { 
                  $("#close").click(function() { 
                      $(".code").toggleClass("menu-unreveal"); 
                  }); 
              }); 
          &lt;/script&gt;
  
  
      &lt;/html&gt;
  </code></pre>
  
  <p>and here is the css t go with it.</p>
  
  <pre><code>#open {
      position:absolute;
      display:block;
      height:40px;
      width:40px;
      background: black;
      top: 200px;
      left: 400px;
      z-index: 10;
  }
  
  #close {
      position:absolute;
      z-index: -9;
      display:block;
      height:40px;
      width:40px;
      background: yellow;
      top: 0;
      left: 40px;
  }
  
  .curl{
          background: -moz-linear-gradient(-45deg, rgba(112,112,112,0) 48%, rgba(229,229,229,0.75) 51%, rgba(229,229,229,1) 52%, rgba(249,249,249,1) 100%); /* FF3.6+ */
          background: -webkit-gradient(linear, left top, right bottom, color-stop(48%,rgba(112,112,112,0)), color-stop(51%,rgba(229,229,229,0.75)), color-stop(52%,rgba(229,229,229,1)), color-stop(100%,rgba(249,249,249,1))); /* Chrome,Safari4+ */
          background: -webkit-linear-gradient(-45deg, rgba(112,112,112,0) 48%,rgba(229,229,229,0.75) 51%,rgba(229,229,229,1) 52%,rgba(249,249,249,1) 100%); /* Chrome10+,Safari5.1+ */
          background: -o-linear-gradient(-45deg, rgba(112,112,112,0) 48%,rgba(229,229,229,0.75) 51%,rgba(229,229,229,1) 52%,rgba(249,249,249,1) 100%); /* Opera 11.10+ */
          background: -ms-linear-gradient(-45deg, rgba(112,112,112,0) 48%,rgba(229,229,229,0.75) 51%,rgba(229,229,229,1) 52%,rgba(249,249,249,1) 100%); /* IE10+ */
          background: linear-gradient(135deg, rgba(112,112,112,0) 48%,rgba(229,229,229,0.75) 51%,rgba(229,229,229,1) 52%,rgba(249,249,249,1) 100%); /* W3C */
  
      width:15px;
      height:15px;
      position:fixed;
      top:0;
      left:0;
      box-shadow: 0px 0px 5px #d3d3d3;
      z-index: 20;
      transition: width 2s ease, height 2s ease; 
  }
  
  
  .curl-out { 
      width: 300px; 
      height: 300px;
      box-shadow: 0px 0px 10px #d3d3d3;
  } 
  
  .code{
      background:#fffff;
      white-space: nowrap;
      overflow: hidden;
      width:15px;
      height:15px;
      position:fixed;
      top:0;
      left:0;
      z-index: 10;
  
  }
  
  .menu-reveal { 
      transition: width 2s ease, height 2s ease, z-index 3s ease;
      width: 250px; 
      height: 250px;
      z-index: 50;
  } 
  
  .menu-unreveal {
      transition: width 2s ease, height 2s ease, z-index 0s ease;
      width: 15px; 
      height: 15px;
      z-index: 10;
  }
  </code></pre>
  
  <p>The problem I am getting is the behaviour of the two buttons (THE BLACK AND YELLOW BOXES)</p>
  
  <p>when you load the page and click the black box the page curls and the text reveals with an ease - thats what i want. However, when you click the black button again the text doesn't disappear with an ease it just disappears.</p>
  
  <p>next</p>
  
  <p>if you refresh your browser and click the yellow button first the page curls but the the text does not reveal - that's fine too -- it's not programmed too. the black box has the #open ID</p>
  
  <p>the problem is this - hit refresh again now click the black button first. this will open the curl and reveal the text, then if you keep clicking the yellow box it will work as desired ease in and out revealing the text with a z-index that makes it clickable too. </p>
  
  <p><strong>WHAT I WANT</strong> I want one button that works from the start which eases in and eases out. However, when the curl "closes" i want the z-index to animate immediately (so there is no delay when the page curl closes.)</p>
  
  <p>I hope this makes sense. </p>