Повторите jQuery addClass для следующего псевдокласса установленное количество раз

Question

Повторите jQuery addClass для следующего псевдокласса установленное количество раз

0

Я использую следующий код, чтобы запустить серию анимаций CSS через плагин jQuery Waypoints. У меня есть 50 из этих div и вам нужно добавить классы "frame-on-1", "frame-on-2", "frame-on-3", "frame-on-4" к установленному количеству divs в заказ. Мой код функционирует, но далек от элегантности, и я знаю, что для этого должен быть более простой способ:

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

Sam 25 апр. 2014, в 17:43

Источник

0

Спасибо, Карл. Можно ли добавить задержку между добавлением каждого класса frame-on *?
Sam 20 май 2014, в 17:48

Теги:

jquery

css

jquery-waypoints

jquery-plugins

1 ответ

Ещё вопросы

Спасибо, Карл. Можно ли добавить задержку между добавлением каждого класса frame-on *?

Karl-André Gagnon · Accepted Answer · 2014-04-25T12-48-00.000Z

Вам действительно нужен рекурсивный таймер. Вот что вы можете использовать:

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