使用jquery从多个元素中删除多个类

Question

这个$ code和jsfiddle链接中的animate.css将动画效果添加到框或图像中。

$('.box1').addClass('animated bounceInUp');

添加动画类和效果类。

$('.box1').removeClass('animated bounceInUp');

删除类。

这里的问题是我打算使用不少于100个盒子/图像，所以应该有一种方法同时添加/删除所有动画和效果类。

这是我正在使用的代码和jsFiddle：

jsfiddle

 $(document).ready(function () {
        $('.box1').addClass('animated bounceInUp');
        $('.box2').addClass('animated bounceInLeft');
        $('.box3').addClass('animated flipInX');
        //
        var wait = window.setTimeout(function () {
            $('#boxes *').removeClass('animated');
        }, 3300);

    });

但是，这仅从元素中删除动画类（所有效果都不同），因此您无法添加新的效果类。我无法弄清楚在'.removeClass（'animated'）'中添加动画的内容。提前致谢。

Answer 1

更新：我重新分配类属性，它删除了初始类.box1，.box2等之后的所有类。

$(function () {
    $('.box1').addClass('animated bounceInUp');
    $('.box2').addClass('animated bounceInLeft');
    $('.box3').addClass('animated flipInX');
    //
    var wait = window.setTimeout(function () {
        $('#boxes > div').each(function(){
            this.className = this.className.split(' ')[0];
        })
    }, 3300);
});

使用直接的JavaScript this.className比任何jQuery方法都快。

只要divs元素的所有直接孩子#boxes确实是盒子，那么选择器$('#boxes > div')就可以了。

更新小提琴：http://jsfiddle.net/rUHpf/18/

Answer 2

您可以通过jQuery attr方法设置任何HTML标记属性。

如果你想从类“动画”中删除所有类，但让类“动画”，你可以使用以下内容：

$(".animated").attr("class", "animated");

这将删除所有其他类，方法是将所有匹配标记的“class”属性设置为“animated”，不做任何其他操作。