Create a Javascript function from this jQuery snippet?

Question

I have the following code, it is working, but I'd like to "automatize" it with a javascript function, so I won't have to write it over and over again.

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

Thanks!

Please post your own code that you tried to do what you need. — Konrad Gadzina
– Konrad Gadzina, Commented Jul 18, 2013 at 5:59
Just put it inside a function definition, what's the problem? — Barmar
– Barmar, Commented Jul 18, 2013 at 5:59

Frederik.L · Accepted Answer · 2013-07-18 06:08:10Z

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 :-)

answered Jul 18, 2013 at 6:08

Frederik.L

5,6202 gold badges33 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sid · Accepted Answer · 2013-07-18 06:00:28Z

1

Not sure if this will work, but worth giving a try:

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

answered Jul 18, 2013 at 6:00

Sid

5,00314 gold badges62 silver badges116 bronze badges

5 Comments

Sid Over a year ago

I am glad! You can make it more dynamic by using the each function of jQuery.

user2556272 Over a year ago

Yes, I thinked about it but wasn't sure about how to use it.. If you have a minute, can you provide a sample with it?

Sid Over a year ago

@Frederik.L has given a more elegant solution. Please accept his answer as the correct one by clicking the tick symbol below the voting links against his response.

Frederik.L Over a year ago

@SidCool Thanks! Yours is good too, more efficient than mine, but efficiency always come with the price of scalability.

Sid Over a year ago

That's right @Frederik.L, but given the number of elements, I would rather go for a cleaner and more elegant approach than a supposedly efficient one :) So your solution is better in this case.

Collectives™ on Stack Overflow

Create a Javascript function from this jQuery snippet?

2 Answers 2

Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related