在jQuery中动画/应用Transition addClass和removeClass？

Question

我是jQuery和javascript的新手，并通过在下一张幻灯片上添加和删除类“活动”来制作一个简单的滑块，该滑块工作正常，但由于没有动画，因此看起来很丑。 有什么方法可以动画化添加和删除类的过程吗？ 喜欢：

$('#next').on('click', function(){
    $('div.active').removeClass('active', duration: 500ms).next().addClass('active', duration: 500ms);})

在Jquery文档网站上，我看到有一个动画功能，用于对事物进行动画处理。 我可以使用该功能吗？

更新：我也试图在div和div.active上应用CSS过渡，这是行不通的。

CSS：

   .slider div {
        display: none;
        opacity: 0;
        -webkit-transition: opacity 1s ease-in-out;
        -moz-transition: opacity 1s ease-in-out;
        -ms-transition: opacity 1s ease-in-out;
        -o-transition: opacity 1s ease-in-out;
        transition: opacity 1s ease-in-out;
    }

    div.active {
        display: inline-block;
        opacity: 1;
        -webkit-transition: opacity 1s ease-in-out;
        -moz-transition: opacity 1s ease-in-out;
        -ms-transition: opacity 1s ease-in-out;
        -o-transition: opacity 1s ease-in-out;
        transition: opacity 1s ease-in-out;
    }

Answer 1

.active {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

Answer 2

您不能真正为addClass或removeClass设置动画，但可以添加过渡效果

但您可以使用一些CSS：

.item {   
   opacity: 0
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
}

.item.active{
   opacity: 1
}

Answer 3

在您的情况下，您可以使用过渡https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions来代替动画

Answer 4

从不同用户的评论中，我了解到css过渡无法应用于display: none元素。 所以我没有显示任何东西，而是应用了height 0px; opacity: 0; height 0px; opacity: 0; 对我来说很好

.slider img{
 height: 0px;
 opacity: 0;
 display: block;
 -webkit-transition: opacity 2s ease;
 -moz-transition: opacity 2s ease;
 -ms-transition: opacity 2s ease;
 -o-transition: opacity 2s ease;
 transition: opacity 2s ease;
}

.slider img.active{
 height: 360px;
 opacity: 1;
 -webkit-transition: opacity 2s ease;
 -moz-transition: opacity 2s ease;
 -ms-transition: opacity 2s ease;
 -o-transition: opacity 2s ease;
 transition: opacity 2s ease;
}

感谢这个小提琴的创造者给了我这个主意。