如何为JQuery addClass/removeClass函数设置动画？

Question

我想知道如何动画JQuery addClass/removeClass函数？

对于animate函数,似乎我必须放置一些CSS属性,但是如果我有一个类,每次触发click函数时都会将元素显示为块,而所有元素都显示为隐藏在CSS中.我该如何设置此流程的动画？

这是我的代码:

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

Answer 1

您可以将CSS3过渡属性应用于使用jQuery操作的元素.以下是供应商前缀的示例:

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