javascript - 在 jQuery 中动画/应用转换 addClass 和 removeClass？

Question

我是 jQuery 和 javascript 的新手，通过在下一张幻灯片上添加和删除类“事件”来制作一个简单的 slider ，它工作正常但看起来很丑，因为没有动画。有什么方法可以使添加和删除类的过程动画化吗？喜欢:

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

在 Jquery documentation website我已经看到有一个用于为事物设置动画的动画功能。是否可以在我的案例中使用该功能？

更新:我还尝试在 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

从不同用户的评论中，我了解到 css transition 不能应用于 display: none 元素。因此，我没有显示任何内容，而是应用了 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;
}

感谢 this fiddle 的创建者这给了我这个想法。