title: jQuery - Side Sliding Menu
body: <p>What is the best method to have slide out menu animate properly upon opening and closing? The slide out menu should animate in and out smoothly upon clicking the "open/close" button, pushing all contents in the body aside.</p>
  
  <p>The jQuery:</p>
  
  <pre><code>var body = $('body');
  var button = $('#button');
  var menu = $('#menu');
  var menuWidth = $('#menu').width();
  
  menu.css({ right: -menuWidth });
  button.html('OPEN');
  
  button.on('click', function(event){
  
      event.preventDefault();
  
      body.animate({ right: 'menuWidth' });
  
      if (body.css({ right: 0 })) {
          body.animate({
              right: +menuWidth
          }, 600);
          button.html('CLOSE');
      } else {
          body.animate({
              right: 0
          }, 600);
          button.html('OPEN');
      }
  
  });
  </code></pre>
  
  <p>The slide currently jumps upon clicking the "close" button and then reanimates back open, without clicking the "open" button.</p>
  
  <p>A link to the current example, <a href="http://jsfiddle.net/andrewwierzba/xv3n257x/" rel="nofollow">jsFiddle</a>.</p>