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

更新：最初のクラスなどの後にすべてのクラスを消去するクラス属性を再割り当てしてい.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.classNamejQueryメソッドよりも高速になります。

divs要素の直接の子がすべて#boxes実際にボックスである限り、セレクター$('#boxes > div')は問題ありません。

更新されたフィドル：http： //jsfiddle.net/rUHpf/18/

于 2013-02-19T19:29:35.953 に答える
0

jQueryattrメソッドを使用して、任意の HTML タグ プロパティを設定できます。

クラスが「アニメーション化」されているものからすべてのクラスを削除したいが、クラスは「アニメーション化」したままにしたい場合は、次を使用できます。

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

これにより、一致したすべてのタグの「class」属性を「animated」に設定することで、他のすべてのクラスが削除されます。

于 2013-02-19T19:45:55.447 に答える