0

次のコードがあり、機能していますが、JavaScript関数で「自動化」したいので、何度も書く必要はありません。

$("#portfolio").waypoint(function() {

    $('.portfolio-item').eq(0).css("animation-delay","0.0s");
    $('.portfolio-item').eq(1).css("animation-delay","0.3s");   
    $('.portfolio-item').eq(2).css("animation-delay","0.6s");
    $('.portfolio-item').eq(3).css("animation-delay","0.9s");
    $('.portfolio-item').eq(4).css("animation-delay","1.2s");
    $('.portfolio-item').eq(5).css("animation-delay","1.5s");
    $('.portfolio-item').eq(6).css("animation-delay","1.8s");
    $('.portfolio-item').eq(7).css("animation-delay","2.1s");
    $('.portfolio-item').eq(8).css("animation-delay","2.4s");

    $('.portfolio-item').addClass('animated fadeInUp'); 

}, { offset: 400});

ありがとう！

4

2 に答える 2

1

SidCoolの答えに代わるものは、jQueryを使用して使用eachを防ぐことeqです：

$('#portfolio').waypoint(function(){
    var $items=$('.portfolio-item');
    $items.each(function(i){
        $(this).css('animation-delay', (i*0.3)+"s");
    });
    $items.addClass('animated fadeInUp');
}, {offset: 400});

しかし、私は彼が以前にそれを提案したことに気づきました。彼の功績:-)

于 2013-07-18T06:08:10.657 に答える