How to animate JQuery addClass/removeClass functions?

Question

I want to know how to animate JQuery addClass/removeClass functions?

for animate function, it seems that I have to put some CSS properties, but what about if I have a class which makes element displayed as block each time I trigger a click function, while all elements are displayed as hidden in CSS. How can I animate this process?

Here's my code:

<script src="js/jquery-1.9.1.min.js"></script>
<script>

    var allSlides = $('li');

    $('#nextSlide').click(function(){
        var nextSlide = $('.active').next();
        if (nextSlide.length == 0)
        {
            var nextSlide = allSlides.first();
        }
        $('.active').removeClass('active');
        nextSlide.addClass('active');
        return false;
    });

    $('#prevSlide').click(function(){
        var prevSlide = $('.active').prev();
        if (prevSlide.length == 0)
        {
            var prevSlide = allSlides.last();
        }
        $('.active').removeClass('active');
        prevSlide.addClass('active');
        return false;
    });

</script>

Solution 1

You can apply the CSS3 transition property to the element being manipulated with jQuery. Here's an example with vendor prefixes:

element {
    -webkit-transition: all 2s; // Chrome
    -moz-transition: all 2s; // Mozilla
    -o-transition: all 2s; // Opera
    transition: all 2s;
}

Solution 2

If you're using jQueryUI you can use the $.toggleClass(); function.

http://api.jqueryui.com/toggleClass/

Solution 3

You can use jQuery .fadeIn() or you can use CSS3 transitions:

#nextSlide, #prevSlide {
  display: none;
  -webkit-transition: display .5s ease;
  -moz-transition: display .5s ease;
  -o-transition: display .5s ease;
}
.active {
  transition: display .5s ease;
  -webkit-transition: display .5s ease;
  -moz-transition: display .5s ease;
  -o-transition: display .5s ease;
}

That should work for you. You can add any other transitions to by replacing display in the transition style.