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

不确定这是否有效，但值得一试：

$("#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});

Answer 2

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});

尽管如此，我才意识到他早些时候提出过这个建议。给他的信用： - ）

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

2 个答案: