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

Create a Javascript function from this jQuery snippet?

本文关键字：一个 Javascript 函数 创建 jQuery 片段      更新时间：2023-09-26

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

谢谢！

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

不过，我只是意识到他早些时候提出了这个建议。归功于他：-）

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

$("#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});
相关文章：