如何为JQuery的addClass/removeClass函数添加动画效果？

Question

我想知道如何使用JQuery的addClass/removeClass函数来实现动画效果？

对于animate函数，似乎需要添加一些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>

- CairoCoder

---

你好，CairoCoder，以下是解决方案 :) - Ibnul Hasan

Answer 1

你可以将CSS3的过渡属性应用于使用jQuery进行操作的元素。以下是一个带有供应商前缀的示例：

你可以使用jQuery来操作元素，并且可以将CSS3的transition属性应用到这些元素上。下面是一个带有供应商前缀的示例：

element {
    -webkit-transition: all 2s; // Chrome
    -moz-transition: all 2s; // Mozilla
    -o-transition: all 2s; // Opera
    transition: all 2s;
}

- aNewStart847

Answer 2

如果您正在使用jQueryUI，您可以使用$.toggleClass();函数。

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

- Derek

Answer 3

你可以使用 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来添加任何其他过渡效果。

- johnkoht

Answer 4

您可以使用jQuery进行动画效果，以添加/删除类。请查看以下格式：

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

以下是示例代码

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

参考链接

注意：但是你需要添加jquery-ui.js文件才能使其正常工作。

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

希望这对你有所帮助。 谢谢。

- Ibnul Hasan