title: JQuery Animate not working
body: <p>For some reason I can' t seem to get .animate to function properly. Can anybody see why?</p>
  
  <p>I'm using this
  a container div...</p>
  
  <pre><code>#valve-menu {
      position: absolute;
      width: 780px;
      top: 200px;
      background-color: #9C3;
      margin-right: 9px;
      margin-left: 10px;
  }
  </code></pre>
  
  <p>then..</p>
  
  <pre><code>#control-cover{
      height: 50px;
      width: 180px;
      overflow: hidden;
      position: absolute;
      }
  #control{
      background-color: #0C9;
      height: 200px;
      width: 180px;
      margin-right: 10px;
      position: absolute;
      }
  </code></pre>
  
  <p>My Jquery is this</p>
  
  <pre><code>$(document).ready(function(){
  
      //When mouse rolls over
      $("#control-cover").mouseover(function(){
          $(this).stop()
                 .animate({height:'150px'},
                          {queue:false, duration:600, easing: 'easeOutBounce'})
      });
  
      //When mouse is removed
      $("#control-cover").mouseout(function(){
          $(this).stop()
                 .animate({height:'50px'},
                          {queue:false, duration:600, easing: 'easeOutBounce'})
      });
  
  });
  </code></pre>
  
  <p>I want to have the control div partially hidden and then onmouseover expand.</p>