设置addClass/removeClass的动画?

问题描述

此处的示例: http://timkjaerlange.com/foobar/stack-stuff/august-18-2010/test.html

我想在我创建的此接口上为addClass和removeClass设置动画.

I want to animate addClass and removeClass on this interface that I've made.

但是我不知道该怎么办.

However I don't know how to go about this.

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

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

<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

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

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

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

此jQuery添加和删除了活动类:

This jQuery adds and removes the active-class:

    $(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方法进行了一些修改，但无法使其正常工作.

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

为addClass/removeClass设置动画的最佳方法是什么?

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

推荐答案

我建议使用 jQueryUI addClass ，可以找到文档此处.

I would suggest using jQueryUI addClass, documentation can be found here.

这篇关于设置addClass/removeClass的动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！