2

这个 $ 代码和 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'）'中添加什么动画。提前致谢。

4

3 回答 3

0

更新：我正在重新分配 class 属性，该属性会在初始 class 等之后删除所有.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);
});

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

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

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

于 2013-02-19T19:29:35.953 回答
0

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

如果您想从具有“动画”类的任何内容中删除所有类，但保留“动画”类，则可以使用以下命令：

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

这将通过将所有匹配标签的“类”属性设置为“动画”来删除所有其他类，没有别的。

于 2013-02-19T19:45:55.447 回答
0

您可以使用队列而不是使用 setTimeout：

$(".box1").removeClass("animated bounceInUp").delay(1000).queue(function(next){
    $(".box2").removeClass("animated bounceInLeft");
    next();
});
于 2020-10-31T06:09:31.280 回答