title: jQuery div transition
body: <p>I have a list a links and a few sections of content</p>
  
  <pre><code>&lt;a href="#one"&gt;ORANGE&lt;/a&gt;
  &lt;a href="#two"&gt;BLUE&lt;/a&gt;
  &lt;a href="#three"&gt;PINK&lt;/a&gt;
  &lt;a href="#four"&gt;GREEN&lt;/a&gt;
  
  &lt;div id="hello"&gt;
      &lt;section id="one"&gt;gfgfgfgf&lt;/section&gt;
      &lt;section id="two"&gt;gfgfgfgf&lt;/section&gt;
      &lt;section id="three"&gt;gfgfgfgf&lt;/section&gt;
      &lt;section id="four"&gt;gfgfgfgf&lt;/section&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>With each of the links corresponding to one of the content sections. I want to slide the <code>&lt;section&gt;</code> from the right when the corresponding link is clicked.</p>
  
  <p>I've tried to play around with this a bit with no success. I just can't grasp the logic behind it. Here is my attempt.</p>
  
  <p><a href="http://jsfiddle.net/5N3YK/" rel="nofollow">http://jsfiddle.net/5N3YK/</a></p>
  
  <p>Feel free to call me stupid, but please don't down vote me. I have tried in different ways with varying results, but I've reverted back to the one that would make most logical sense.</p>
  
  <p>UPDATE: I forgot to write in the original post - I want the old one to slide out and the new one to slide in</p>