jQuery - Coda-like content sliding
<p>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:</p>

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

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

<pre><code>&lt;div class="content-slides"&gt;
    &lt;div class="slide-1"&gt;text&lt;/div&gt;
    &lt;div class="slide-2"&gt;text&lt;/div&gt;
    &lt;div class="slide-3"&gt;text&lt;/div&gt;
    &lt;div class="slide-4"&gt;text&lt;/div&gt;
    &lt;div class="slide-5"&gt;text&lt;/div&gt;
    &lt;div class="slide-6"&gt;text&lt;/div&gt;
&lt;/div&gt;
</code></pre>
