title: How to slide a td from right to left on mouseover and slide back on mouseout
body: <p>I have an html page which has been divided in single row and two columns. 1st columns has been given a width of 90% and 2nd column 10%.</p>
  
  <p>When page loads I want that 2nd column should be hidden completely and on whole page there should be the content of 1st column.</p>
  
  <p>But when I move my mouse towards that 10% of page on the right side. The content of that td should be come as sliding and when I moved out mouse it should slide back(hide) to the right.</p>
  
  <p>I am trying to do this:</p>
  
  <pre><code>$(document).ready(function() {
    document.getElementById("map-canvas").style.height = document.body.clientHeight + 'px';
    $( "#side" ).mouseover(function() {
      document.getElementById("map-canvas").className = "OverlayEffect";
      $( "#map-canvas" ).animate({
        width: "100%"
      });
    });
    $( "#side" ).mouseout(function() {
      $( "#map-canvas" ).animate({
        width: "90%"
      });
    });
  });
  </code></pre>
  
  <p>Html:</p>
  
  <pre><code>&lt;table width="100%"&gt;
     &lt;tr&gt;
        &lt;td width="90%" id="map"&gt;
           &lt;!--  start  Loading Fancy Box handling --&gt;
           &lt;div id="modalMsg"&gt;
              &lt;br /&gt; &lt;br /&gt; &lt;imgsrc="../DiagnosticDrop4/static/images/ajax-loader.gif" /&gt; &lt;br /&gt; &lt;br /&gt;
           &lt;/div&gt;
           &lt;!--  end  Loading Fancy Box handling --&gt;
           &lt;div id="map-canvas"&gt;&lt;/div&gt;
        &lt;/td&gt;
        &lt;td width="10%" class="Sidebar" id="side"&gt;
           &lt;div id="map-canvas1"&gt;
              &lt;a id='link' href='../DiagnosticDrop4/san.html'&gt;
                 &lt;h3&gt;
                 &lt;center&gt;Add/Delete SAN&lt;/center&gt;
              &lt;/a&gt;
           &lt;/div&gt;
           &lt;div id="map-canvas2"&gt;
              &lt;a id='alink' href='../DiagnosticDrop4/ParamIntervalDetails'&gt;
                 &lt;h3&gt;
                 &lt;center&gt;24hr Dashboard&lt;/center&gt;
              &lt;/a&gt;
           &lt;/div&gt;
        &lt;/td&gt;
     &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>