title: how to make div slide from right to left
body: <p>got a code here from someone....</p>
  
  <p>what I like is to make the sliding div from right slide to left, i mean it hides the div to the right and slowly slides to the left for 300px width.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;a id="loginPanel"&gt;quote&lt;/a&gt;
  &lt;div id="userNav"&gt;User Area&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#loginPanel {
      color: #000;
      cursor:pointer;
  }
  
  #userNav {
      width: 200px;
      height: 200px;
      display: none;
      background: #ff0000;
  }
  </code></pre>
  
  <p>Jquery</p>
  
  <pre><code>// Open / Close Panel According to Cookie //    
  if ($.cookie('panel') == 'open'){    
      $('#userNav').slideDown('fast');
  } else {
      $('#userNav').slideUp('fast');
  }
  
  // Toggle Panel and Set Cookie //
  $('#loginPanel').click(function(){        
      $('#userNav').slideToggle('fast', function(){
          if ($(this).is(':hidden')) {
              $.cookie('panel', 'closed');
          } else {
              $.cookie('panel', 'open');
          }
      });
  });
  </code></pre>
  
  <p>Please need help on this one. just to make the div slide right to left</p>
  
  <p>here is the fiddle <a href="http://jsfiddle.net/7m7uK/195/" rel="noreferrer">http://jsfiddle.net/7m7uK/195/</a></p>