title: Translate another div on click using jQuery and CSS3
body: <p>I'm trying to mimic the lovely mobile menu implementation on <a href="http://mashable.com/" rel="nofollow">http://mashable.com/</a> (reduce the width of your browser to see the menu button on the top left, and click on it).</p>
  
  <p>Basically, I have a button (#slide-menu). The rest of the page content is wrapped in a '#nudge' div that I want to slide over 250 pixels to the right when the button is clicked.</p>
  
  <pre><code>jQuery('#slide-menu').click(function() {
          jQuery('#nudge').css('-webkit-transform', 'translate(250px, 0)');
          jQuery('#mobile-menu').css('display', 'block');
      });
  </code></pre>
  
  <p>The #mobile-menu is containing the navigation which is to pop out from the left of the screen. 
  This code works, but there isn't a smooth transition. The content just pops to the right and the menu appears, but doesn't have any sort of delay to give a smooth slide like on mashable. I've also tried toggling a class instead of using the .css() to allow for the multiple prefixes, but have had even less luck.</p>
  
  <p>I'm not sure if I'm misunderstanding how the transform property works. I've tried reading into it, but most examples I can find are related to hovering over an element and making it animate, as opposed to manipulating on element on click of another.</p>
  
  <p>Thanks in advance for any help!</p>