jQuery div transition
<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>
