title: jQuery slide out animation
body: <p>I am working on a slide out bar for a project I am working on and I am having a hard time getting an animation to work. </p>
  
  <p>My Goal is to have it slide out from left to right not appear from the top like it is now. </p>
  
  <p>Below is my jQuery code as well as my jsfidde </p>
  
  <p>Thanks in advance
  George</p>
  
  <p><a href="http://jsfiddle.net/tXye8/" rel="nofollow">http://jsfiddle.net/tXye8/</a></p>
  
  <pre><code>$(document).ready(function(){
  var $button = $('#sideoutButton');
  var $contain = $('#slideoutContain');
  var containWidth = $('#slideoutContain').width();
  
  //Hide the box
  $contain.hide();
  
  //Hide or show the container on button click
  $button.click(function(){
      if ($contain.is(":visible")) {
          $contain.hide();
          $button.css("left", 0);
      }
      else {
          $contain.show(400, buttonMove());
      }
  });
  
  function buttonMove(){
      $button.css("left", function(value) {
          return 0 + containWidth;
      });
  }
    });
  </code></pre>