Question

我是jQuery＆amp;的新手通过添加和删除下一张幻灯片上的“活动”类来制作一个简单的滑块，这个工作正常，但看起来很丑，因为没有动画。有没有办法动画添加和删除类的过程？像：

$('#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

.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/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

Answer 4

根据不同用户的评论，我发现css转换不能应用于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的创建者给了我这个想法。

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

4 个答案: