Question

Live example here: http://timkjaerlange.com/foobar/stack-stuff/august-18-2010/test.html

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 -->

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;
    }

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');
        });

    }); 

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

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

Answer 1

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