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

前端之家收集整理的这篇文章主要介绍了如何为JQuery addClass / removeClass函数设置动画?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想知道如何动画 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>

解决方法

您可以将CSS3过渡属性应用于使用jQuery操作的元素.以下是供应商前缀的示例:
element {
    -webkit-transition: all 2s; // Chrome
    -moz-transition: all 2s; // Mozilla
    -o-transition: all 2s; // Opera
    transition: all 2s;
}
原文链接:https://www.f2er.com/jquery/177856.html

猜你在找的jQuery相关文章