@barsecky

Как правельно поправить скрипт?

Доброго времени суток.
Помогите поправить скрипт.
На сайте https://clever-babbage-1c01a3.netlify.app есть блок с кругами которые переворачиваются по времени или когда на них навести курсором. Как мог поправил что бы сначала по времени переворачивался верхний ряд, а затем нижний.
Но вот при наведении курсора поварачиваютя не так как надо.
Помогите поправить скрипт.
Зарание спасибо за помощь!

$('.skills__section').each(function(index){

    var $t=$(this);

    $t.viewportChecker({

      callbackFunction:function(elem){ 

        const cards = document.querySelectorAll('.flip-card--1');
        let timerId = setTimeout(() => {
          cards.forEach(card => {
              card.classList.add('flip-card_flipped');
              card.removeEventListener('mouseover', flipped);
            });
        }, 5000);

        const cardsTwo = document.querySelectorAll('.flip-card--2');
        let timerIdi = setTimeout(() => {
          cardsTwo.forEach(card => {
              card.classList.add('flip-card_flipped');
              card.removeEventListener('mouseover', flipped);
            });
        }, 5500);

        function flipped() {
          clearTimeout(timerId);
          
          cards.forEach(card => {
              card.classList.add('flip-card_flipped');
              card.removeEventListener('mouseover', flipped);
            });
        }

        function flipped() {
          clearTimeout(timerIdi);
          
          cardsTwo.forEach(card => {
              card.classList.add('flip-card_flipped');
              card.removeEventListener('mouseover', flipped);
            });
        }
        
        cards.forEach(card => card.addEventListener('mouseover', flipped));
        cardsTwo.forEach(card => card.addEventListener('mouseover', flipped));
      }
    });
  });
  • Вопрос задан
  • 76 просмотров
Решения вопроса 1
@slide13
frontend/web-developer
У тебя обе функции для очистки таймера и ивентов для 1го и 2го ряда называются одинаково - flipped. Из 2х одинаковых функций выполняется только последняя. Т.е. когда наводишь на любой элемент 1го ряда срабатывает 2й flipped, который, соответственно, для 2го ряда добавляет css класс flip-card_flipped и поэтому весь второй ряд переворачивается. Что нужно будет сделать теперь, думаю, понятно.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
18 апр. 2024, в 21:56
2000 руб./за проект
18 апр. 2024, в 21:00
150 руб./за проект