Repeat jQuery addClass to next pseudo class a set number of times

Question

I am using the following code to fire off a series of CSS animations via jQuery Waypoints plugin. I have 50 of these divs and need to add the classes "frame-on-1","frame-on-2","frame-on-3","frame-on-4" to a set number of divs in order. My code functions but is far from elegant and I know there must be an easier way to do this:

$('#panel4').waypoint(function(direction) {


    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(27)').addClass("frame-on-1");  
        }
    }, 100);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(27)').addClass("frame-on-2");  
        }
    }, 200);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(27)').addClass("frame-on-3");  
        }
    }, 300);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(27)').addClass("frame-on-4");  
        }
    }, 400);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(28)').addClass("frame-on-1");  
        }
    }, 500);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(28)').addClass("frame-on-2");  
        }
    }, 600);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(28)').addClass("frame-on-3");  
        }
    }, 700);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(28)').addClass("frame-on-4");  
        }
    }, 800);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(28)').addClass("frame-on-1");  
        }
    }, 900);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(28)').addClass("frame-on-2");  
        }
    }, 1000);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(28)').addClass("frame-on-3");  
        }
    }, 1100);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(28)').addClass("frame-on-4");  
        }
    }, 1200);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(29)').addClass("frame-on-1");  
        }
    }, 1300);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(29)').addClass("frame-on-2");  
        }
    }, 1400);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(29)').addClass("frame-on-3");  
        }
    }, 1500);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(29)').addClass("frame-on-4");  
        }
    }, 1600);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(30)').addClass("frame-on-1");  
        }
    }, 1700);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(30)').addClass("frame-on-2");  
        }
    }, 1800);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(30)').addClass("frame-on-3");  
        }
    }, 1900);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(30)').addClass("frame-on-4");  
        }
    }, 2000);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(30)').addClass("frame-on-1");  
        }
    }, 2100);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(30)').addClass("frame-on-2");  
        }
    }, 2200);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(30)').addClass("frame-on-3");  
        }
    }, 2300);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(30)').addClass("frame-on-4");  
        }
    }, 2400);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(31)').addClass("frame-on-1");  
        }
    }, 2500);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(31)').addClass("frame-on-2");  
        }
    }, 2600);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(31)').addClass("frame-on-3");  
        }
    }, 2700);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(31)').addClass("frame-on-4");  
        }
    }, 2800);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(31)').addClass("frame-on-1");  
        }
    }, 2900);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(31)').addClass("frame-on-2");  
        }
    }, 3000);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(32)').addClass("frame-on-3");  
        }
    }, 3100);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(32)').addClass("frame-on-4");  
        }
    }, 3200);

}, { offset: '98%' });


$('#panel4part2').waypoint(function(direction) {
    setTimeout(function(){
        if (direction === 'down' ) {
            $('.circle-anim :nth-child(33)').addClass("frame-on-1");  
        }
    }, 100);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(33)').addClass("frame-on-2");  
        }
    }, 200);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(33)').addClass("frame-on-3");  
        }
    }, 300);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(33)').addClass("frame-on-4");  
        }
    }, 400);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(34)').addClass("frame-on-1");  
        }
    }, 500);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(34)').addClass("frame-on-2");  
        }
    }, 600);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(34)').addClass("frame-on-3");  
        }
    }, 700);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(34)').addClass("frame-on-4");  
        }
    }, 800);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(35)').addClass("frame-on-1");  
        }
    }, 900);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(35)').addClass("frame-on-2");  
        }
    }, 1000);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(35)').addClass("frame-on-3");  
        }
    }, 1100);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(35)').addClass("frame-on-4");  
        }
    }, 1200);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(36)').addClass("frame-on-1");  
        }
    }, 1300);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(36)').addClass("frame-on-2");  
        }
    }, 1400);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(36)').addClass("frame-on-3");  
        }
    }, 1500);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(36)').addClass("frame-on-4");  
        }
    }, 1600);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(37)').addClass("frame-on-1");  
        }
    }, 1700);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(37)').addClass("frame-on-2");  
        }
    }, 1800);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(1)').addClass("frame-on-3");  
        }
    }, 1900);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(1)').addClass("frame-on-4");  
        }
    }, 2000);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(1)').addClass("frame-on-1");  
        }
    }, 2100);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(1)').addClass("frame-on-2");  
        }
    }, 2200);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(1)').addClass("frame-on-3");  
        }
    }, 2300);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(2)').addClass("frame-on-4");  
        }
    }, 2400);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(2)').addClass("frame-on-1");  
        }
    }, 2500);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(2)').addClass("frame-on-2");  
        }
    }, 2600);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(2)').addClass("frame-on-3");  
        }
    }, 2700);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(2)').addClass("frame-on-4");  
        }
    }, 2800);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(3)').addClass("frame-on-1");  
        }
    }, 2900);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(3)').addClass("frame-on-2");  
        }
    }, 3000);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(3)').addClass("frame-on-3");  
        }
    }, 3100);
    setTimeout(function(){

        if (direction === 'down' ) {
            $('.circle-anim :nth-child(3)').addClass("frame-on-4");  
        }
    }, 3200);

}, { offset: '98%' });

Answer 1

You really need a recursive timer. Here what you can use :

function recursiveTimer(indexStart, indexEnd, direction, indexArray){
    var classes = ['frame-on-1', 'frame-on-2', 'frame-on-3', 'frame-on-4'];

    if(typeof indexArray === "undefined") indexArray = 0;

    if(indexArray === classes.length) indexArray = 0, indexStart++;

    if(indexStart <= indexEnd){
        setTimeout(function(){
            if (direction === 'down' ){
                $('.circle-anim :nth-child(' + indexStart + ')').addClass(classes[indexArray]);
                recursiveTimer(indexStart, indexEnd, direction, indexArray+1);    
            }
        }, 100)
    }
};

Once that function is declared, you can then bind your event :

$('#panel4').waypoint(function(direction){
  recursiveTimer(27,32,direction);
})

$('#panel4part2').waypoint(function(direction){
  recursiveTimer(27,37,direction);
  setTimeout(function(){
    recursiveTimer(1,3,direction);
  }, 1900);
})