jQuery div transition

Question

I have a list a links and a few sections of content

<a href="#one">ORANGE</a>
<a href="#two">BLUE</a>
<a href="#three">PINK</a>
<a href="#four">GREEN</a>

<div id="hello">
    <section id="one">gfgfgfgf</section>
    <section id="two">gfgfgfgf</section>
    <section id="three">gfgfgfgf</section>
    <section id="four">gfgfgfgf</section>
</div>​

With each of the links corresponding to one of the content sections. I want to slide the <section> from the right when the corresponding link is clicked.

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.

http://jsfiddle.net/5N3YK/

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.

UPDATE: I forgot to write in the original post - I want the old one to slide out and the new one to slide in

Answer 1

Simple solution

http://jsfiddle.net/UDt7q/6/

but not optimal ofcourse.

Answer 2

You could do it like this : http://jsfiddle.net/5N3YK/20/

Far from perfect, do not use it without changes. It's more an exemple showing how you could build it than a ready-made solution.

Hope it helps though, good luck !