title: jquery sliding side bar Left to right
body: <p>I am trying to create a sliding side bar with effects similar to </p>
  
  <ol>
  <li>www.wookmark.com</li>
  <li><a href="http://www.dynamicdrive.com/dynamicindex1/slideinmenu.htm" rel="nofollow">http://www.dynamicdrive.com/dynamicindex1/slideinmenu.htm</a>.</li>
  </ol>
  
  <p>This is how far I wrote the code.But this is jerky.</p>
  
  <ol>
  <li>Can anyone propose a better solution with aniamtions/easing/toggle etc</li>
  <li>I want code to be independent of left parameter i.e. $("#slide").css("left", "-150px");
  It should be able to slide-in/slide-out with all sorts of div width</li>
  </ol>
  
  <p>Any ideas ?    </p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#slide{
  border:1.5px solid black;
  position:absolute;
  top:0;
  left:0;
  width:150px;
  height:100%;
  background-color:#F2F2F2;
  layer-background-color:#F2F2F2;
  }
  </code></pre>
  
  <p><strong>HTML</strong> </p>
  
  <pre><code>&lt;div id="slide" style="left: -150px; top: 0px; width: 160px;"&gt;
      &lt;p&gt;Something here&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Jquery</strong></p>
  
  <pre><code>&lt;script&gt;
      jQuery(document).ready(function() {
          $('#slide').mouseover(function() {
              $("#slide").css("left", "0px");
          });
  
          $('#slide').mouseout(function() {
              $("#slide").css("left", "-150px");
          });
  
      });
   &lt;/script&gt;
  </code></pre>