title: CSS div box animation with elastic effect
body: <p>Hey all i have a JSFiddle of what i am trying to accomplish here > <a href="http://jsfiddle.net/HRGKq/13/" rel="nofollow">JSFIDDLE CODE</a></p>
  
  <p>Problem being is that i am unsure on how to go about giving it the elastic effect when opening and when closing back down to a smaller square. However, currently its going crazy once you hover over it :o). It also seems to push the text inside all crazy as it re-sizes. How can i just have the text appear the same no matter the shape the box goes to?</p>
  
  <p>The JS code:</p>
  
  <pre><code>$('#menuSquare').mouseover(function() {
      $('#menuSquare').animate({
          width: "95",
          height: "400",
          padding: '20',
          opacity: 0.8
      }, 1000)
  });
  
  $('#menuSquare').mouseout(function() {
      $('#menuSquare').animate({
          width: "20",
          height: "20",
          opacity: 0.4
      }, 1000)
  });
  </code></pre>
  
  <p>​The HTML:</p>
  
  <pre><code>&lt;div id="menuSquare" class="TheMenuBox"&gt;
        &lt;p&gt;&lt;a href="#" style="text-decoration:none; color:#666;"&gt;Category 1&lt;/a&gt;&lt;/p&gt;
        &lt;p&gt;&lt;a href="#" style="text-decoration:none; color:#666;"&gt;Category 2&lt;/a&gt;&lt;/p&gt;
        &lt;p&gt;&lt;a href="#" style="text-decoration:none; color:#666;"&gt;Category 2&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>body,td,th {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 13px;
      color:#666;
  }
  body {
      background-color: #0CF;
      margin-left: 0px;
      margin-top: 0px;
      margin-right: 0px;
      margin-bottom: 0px;
  }
  
  .TheMenuBox {
      position:absolute; 
      background-color:#FFF; 
      width: 20px; /* 95 */
      display:block; 
      height: 20px;
      top:16px; 
      left:260px; 
      opacity:0.40; 
      filter:alpha(opacity=40); 
      z-index:1000; 
      padding:0px; /* 20 */
      text-transform:uppercase; 
      text-decoration:none;
      overflow: hidden;
  }
  </code></pre>
  
  <p>​Could anyone help out with this?</p>