将jQuery addClass重复设置为下一个伪类的次数

Question

我正在使用以下代码通过jQuery Waypoints插件触发一系列CSS动画。我有50个这样的div，需要将类“frame-on-1”，“frame-on-2”，“frame-on-3”，“frame-on-4”添加到一组div中订购。我的代码功能但远非优雅，我知道必须有一个更简单的方法来执行此操作：

$('#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

你真的需要一个递归计时器。在这里您可以使用：

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

声明该函数后，您可以绑定您的事件：

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

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