3

Доброго времени суток. Несколько часов "бьюсь" головой и думаю, как сделать, чтобы при наведении на блок запускался таймер, а после вывода курсора из блока запускался обратный Т.е нужно Чтобы при наведении на блок через секунду добавился класс number_1, через две number_2 и т.д. (это все легко решается с помощью setTimeout) Но нужно чтобы если человек вывел курсор за область блока, начинался обратный отсчет Т.е если последним было number_4, он начинал удалить классы, через 1 секунду number_4, через 2 number_3 и т.д

2
  • это все легко решается с помощью setTimeout
    – Grundy
    28 авг 2016 в 6:51
  • Можете показать пример? я понимаю, что это через setTimeout решается, но пока не могу понять как. Пробовал несколько способов, но не получается адекватно остановить и запустить после наведения/вывода курсора на/за область блока
    – lingvo
    28 авг 2016 в 7:45

1 ответ 1

3

Пожалуйста - https://jsfiddle.net/knvnckbz/4/

var div = document.querySelector('div'),
  addTimeout = null,
  removeTimeout = null,
  classNames = [];

div.addEventListener('mouseover', addClass);
div.addEventListener('mouseout', removeClass);

function addClass() {
  clearTimeout(removeTimeout);
  var className = 'number_' + (classNames.length);
  div.classList.add(className);
  classNames.push(className);
  addTimeout = setTimeout(addClass, 1000);
}

function removeClass() {
  clearTimeout(addTimeout);
  var className = classNames.pop();

  if (!className) return;

  div.classList.remove(className);

  removeTimeout = setTimeout(removeClass, 1000);
}
div {
  width: 100px;
  height: 100px;
  background: black;
}
.number_1 {
  background: red;
}
.number_2 {
  background: blue;
}
.number_3 {
  background: yellow;
}
<div>

</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.