title: JQUERY Sliding door effect - works in jsFiddle but not chrome
body: <p>I'm trying to do a sliding door effect using jquery. I have mocked it up in jsFiddle and it works okay in there. The problem I have, is when I run it locally, nothing works. I have downloaded and linked to the jquery library locally, and I have another project where I even link to the API and it works just fine. I don't understand what's going on here, as far as I can tell everything is loading okay, but when I click the link nothing happens. </p>
  
  <p>here is the link the jsfiddle
  <a href="http://jsfiddle.net/aosto/kU9HY/" rel="nofollow noreferrer">http://jsfiddle.net/aosto/kU9HY/</a></p>
  
  <p>edit: Also found that my code doesn't seem to work. I'm following <a href="https://stackoverflow.com/questions/4207789/how-to-make-a-sliding-door-effect">how to make a sliding door effect?</a>, the direction provided by orbling. But I think I may have the CSS screwed up. Not sure how to initially hide the others and make one visible. Any help would be appreciated.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;DBKustoms&lt;/title&gt;
  &lt;link rel="stylesheet" href="./css/style.css" /&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;    &lt;/script&gt;
  &lt;script src="./js/include.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="menu-container"&gt;
      &lt;div id="cover"&gt;&lt;/div&gt;
      &lt;div id="menu-home" class="menu"&gt;&lt;/div&gt;
      &lt;div id="menu-contact" class="menu"&gt;contact&lt;/div&gt;
      &lt;div id="menu-services" class="menu"&gt;&lt;/div&gt;
      &lt;div id="menu-photo" class="menu"&gt;&lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;div id="buttons"&gt;
      &lt;div id="home" class="menu-button"&gt;Home&lt;/div&gt;
      &lt;div id="contact" class="menu-button"&gt;Contact&lt;/div&gt;
      &lt;div id="services" class="menu-button"&gt;Services&lt;/div&gt;
      &lt;div id="photo" class="menu-button"&gt;Photo&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>the CSS</p>
  
  <pre><code>#menu-container {
      float:left;
      width: 200px;
      height: 300px;
      clip: auto;
      overflow: hidden;
      position: relative;
      }
  
  #cover    {
      width: 100%;
      height: 100%;
      position: absolute;
      top: -200px;
      background: black;
      z-index:1000;    
      }
  
  #menu-home {
      width:100%;
      height:100%;
      background:blue;
      }
  
  #menu-services {
      Height:100%;
      width:100%;
      background:purple;
  
      }
  
  #menu-contact {
      Height:100%;
      width:100%;
      background:yellow;
      }
  
  #menu-photo {
      Height:100%;
      width:100%;
      background:brown;
  
  }
  
  #buttons {
      float:left;
  }   
  </code></pre>
  
  <p>and the JS</p>
  
  <pre><code>$('.menu-button').click(function() {
      var cMenuButton = $(this);
      var cMenuID = cMenuButton.attr('id');
  
      var coverHeight = $('#cover').height();
      var cVisibleMenu = $('.menu:visible');
      var cVisibleHeight = cVisibleMenu.height();
  
      $('#cover').animate({'height': coverHeight + cVisibleHeight}, 600, 'linear', function() {
          $('.menu').hide();
          $('#menu-' + cMenuID).show();
  
          var newMenuHeight = $('#menu-' + cMenuID).height();
          var coverHeight = $('#cover').height();
  
          $('#cover').animate({'height': coverHeight - newMenuHeight}, 600, 'linear');
      }); 
  });
  </code></pre>