How to animate JQuery addClass/removeClass functions?

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>