如何动画jQuery addClass/removeClass函数？

Question

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

对于动画函数，似乎我必须放置一些CSS属性，但是如果我有一个类使得元素每次触发点击函数时显示为块，而所有元素都显示为隐藏在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; 
} 

Answer 2

您可以使用jQuery .fadeIn()或者你可以使用CSS3过渡：

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

这应该为你工作。您可以通过替换display以过渡样式添加任何其他转场。

Answer 3

如果您使用的是jQueryUI，您可以使用$ .toggleClass（）;功能。

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

Answer 4

你绝对可以动画添加/删除类jquery.Please检查以下

.removeClass(className [, duration ] [, easing ] [, complete ]) 

示例代码下面的格式

$("div").click(function() { 
    $(this).removeClass("big-blue", 1000, "easeInBack"); 
}); 

Reference link

注意：但是，您必须添加jquery-ui.js文件才能使其正常工作。

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

希望这会有所帮助。 谢谢