jQuery - Coda-like content sliding

I need to achieve an effect where when a user triggers a hover on an a tag, current content on the screen slides out, and the new content slides in (depending on what was hovered on). Here is my HTML:

<div class="services-image" style="background:url('/sites/default/files/services开发者_JAVA百科-background.jpg') top left no-repeat">
<ul>
<li><a href="#" id="box-1" rel="nofollow">Secure Mobile Computing</a></li>
<li><a href="#" id="box-2" rel="nofollow">IT<br />Consulting</a></li>
<li><a href="#" id="box-3" rel="nofollow">Software<br />Engineering</a></li>
<li><a href="#" id="box-4" rel="nofollow">Microsoft<br />Services</a></li>
<li><a href="#" id="box-5" rel="nofollow">Cyber<br />Security</a></li>
<li><a href="#" id="box-6" rel="nofollow">Infrastructure &amp; System<br />Adminstration</a></li>
</ul>
</div>
</div>

So, when a user triggers a#box-2 hover, the divs below ease in/out with new content. Example container markup:

<div class="content-slides">
    <div class="slide-1">text</div>
    <div class="slide-2">text</div>
    <div class="slide-3">text</div>
    <div class="slide-4">text</div>
    <div class="slide-5">text</div>
    <div class="slide-6">text</div>
</div>

I remember seeing this tutorial - it's aimed at designers, so you should fly through it :)

http://jqueryfordesigners.com/coda-slider-effect/

It should be easy enough to change the click events to mouseover.