动画addClass / removeClass？

Question

此处的实例：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设置动画的最佳方法是什么？

Answer 1

我建议使用jQueryUI addClass，可以找到文档here。