javascript - 从这个 jQuery 片段创建一个 Javascript 函数？

Question

我有以下代码，它正在工作，但我想用 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}); 

谢谢！

Answer 1

An alternative to SidCool's answer would be to use jQuery each to prevent using 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});

Though, I just realized that he suggested it earlier. Credits to him :-)

Answer 2

不确定这是否可行，但值得一试：

$("#portfolio").waypoint(function() {
    for(var i=0;i<9;i++){
            var j = (i*0.3)+"s";
            $('.portfolio-item').eq(i).css("animation-delay",j);
    }
    $('.portfolio-item').addClass('animated fadeInUp'); 

}, { offset: 400});