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”，不做任何其他操作。

Answer 3

可以使用队列来代替使用setTimeout：

$(".box1").removeClass("animated bounceInUp").delay(1000).queue(function(next){
    $(".box2").removeClass("animated bounceInLeft");
    next();
});

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

3 个答案: