如何为 JQuery addClass/removeClass 函数设置动画？

Posted 2023-05-08

技术标签:

【中文标题】如何为 JQuery addClass/removeClass 函数设置动画？【英文标题】：How to animate JQuery addClass/removeClass functions? 【发布时间】：2013-03-16 11:16:30 【问题描述】：

我想知道

对于动画功能，似乎我必须放置一些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 找到下面的解决方案:) 【参考方案1】：

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

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

【讨论】：

【参考方案2】：

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

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

【讨论】：

【参考方案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 来添加任何其他过渡。

【讨论】：

【参考方案4】：

您绝对可以使用 jquery 为添加/删除类设置动画。请检查以下格式

.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>

希望这会有所帮助。谢谢