javascript - 动画添加类/删除类？

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 .