Animate addClass/removeClass?
<p>Live example here: <a href="http://timkjaerlange.com/foobar/stack-stuff/august-18-2010/test.html" rel="nofollow">http://timkjaerlange.com/foobar/stack-stuff/august-18-2010/test.html</a></p>

<p>I want to animate addClass and removeClass on this interface that I've made.</p>

<p>However I don't know how to go about this.</p>

<p>I have three boxes that I want to switch between based on when the user clicks a link.</p>

<pre><code>&lt;div id="boxes" class="slideshow"&gt;

    &lt;div id="box-1"&gt;
        &lt;h2&gt;Slide 1&lt;/h2&gt;
        &lt;div class="nav"&gt;
            &lt;a title="1" class="current" href="#"&gt;1&lt;/a&gt;
            &lt;a title="2" href="#"&gt;2&lt;/a&gt;
            &lt;a title="3" href="#"&gt;3&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;&lt;!-- /box-1 --&gt;

    &lt;div id="box-2" class="active"&gt; 
        &lt;h2&gt;Slide 2&lt;/h2&gt;
        &lt;div class="nav"&gt;
            &lt;a title="1" href="#"&gt;1&lt;/a&gt;
            &lt;a title="2" class="current" href="#"&gt;2&lt;/a&gt;
            &lt;a title="3" href="#"&gt;3&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;&lt;!-- /box-2 --&gt;

    &lt;div id="box-3"&gt;
        &lt;h2&gt;Slide 3&lt;/h2&gt;
        &lt;div class="nav"&gt;
            &lt;a title="1" href="#"&gt;1&lt;/a&gt;
            &lt;a title="2" href="#"&gt;2&lt;/a&gt;
            &lt;a title="3" class="current" href="#"&gt;3&lt;/a&gt;
        &lt;/div&gt;
    &lt;/div&gt;&lt;!-- /box-3 --&gt;

&lt;/div&gt;&lt;!-- /boxes --&gt;
</code></pre>

<p>I've added some CSS to adjust the z-index based on when the user clicks </p>

<pre><code>    .slideshow &gt; div {
        z-index: 8;
    }

    .slideshow &gt; div.active {
        z-index: 9;
    }
</code></pre>

<p>This jQuery adds and removes the active-class:</p>

<pre><code>    $(document).ready(function() {

        $("a").click(function() {
            var title = $(this).attr("title");
            var box = "#box-" + title;
            $("#boxes div").not(box).removeClass('active');
            $(box).addClass('active');
        });

    }); 
</code></pre>

<p>I fiddled a bit around with the animate method, but I can't get it to work.</p>

<p>What would be the best way to animate the addClass/removeClass?</p>
