动画添加类/删除类？

活生生的例子在这里：http://timkjaerlange.com/foobar/stack-stuff/august-18-2010/test.html http://timkjaerlange.com/foobar/stack-stuff/august-18-2010/test.html

我想在我制作的这个界面上对 addClass 和 removeClass 进行动画处理。

但是我不知道该怎么做。

我想根据用户单击链接的时间在三个框之间进行切换。

<div id="boxes" class="slideshow">

    <div id="box-1">
        <h2>Slide 1</h2>
        <div class="nav">
            <a title="1" class="current" href="#">1</a>
            <a title="2" href="#">2</a>
            <a title="3" href="#">3</a>
        </div>
    </div><!-- /box-1 -->

    <div id="box-2" class="active"> 
        <h2>Slide 2</h2>
        <div class="nav">
            <a title="1" href="#">1</a>
            <a title="2" class="current" href="#">2</a>
            <a title="3" href="#">3</a>
        </div>
    </div><!-- /box-2 -->

    <div id="box-3">
        <h2>Slide 3</h2>
        <div class="nav">
            <a title="1" href="#">1</a>
            <a title="2" href="#">2</a>
            <a title="3" class="current" href="#">3</a>
        </div>
    </div><!-- /box-3 -->

</div><!-- /boxes -->

我添加了一些 CSS 来根据用户点击的时间调整 z-index

    .slideshow > div {
        z-index: 8;
    }

    .slideshow > div.active {
        z-index: 9;
    }

此 jQuery 添加和删除活动类：

    $(document).ready(function() {

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

    }); 

我摆弄了一下 animate 方法，但无法让它工作。

为 addClass/removeClass 设置动画的最佳方式是什么？

我建议使用jQueryUI http://jqueryui.com/ addClass http://jqueryui.com/demos/addClass/，可以找到文档here http://jqueryui.com/demos/addClass/.