JavaScript — скрываем объект через какое-то время

Admin JavaScript

Как скрыть меню или какое-то окошко на JS через определенное время, после того как мышка уйдет с этой области.

Следующий код работает, но это черновой вариант. Некогда было тестировать переделку.

var button = component.querySelector('.button'),
    menu   = component.querySelector('.menu'),
    timerId;

list.addEventListener('mouseleave', function() {
    timerId = setTimeout(function () {
        menu.classList.add('hidden');
    }, 3000); // 1 sec = 1000

    list.addEventListener('mouseenter', function () {
        clearTimeout(timerId);
    });
});

Вместо добавления класса:

menu.classList.add('hidden');

Можно добавлять свойство css

menu.style.display = 'none';

Код можно улучшить, если:
— вынести добавление menu.addEvent за событие mouseleave.
— добавить проверку на timeId перед тем как очищать таймер (clearTimeout).

Метки:

На сайте отсутствует реклама! Значете почему?

Помогать людям - моё хобби. А навыки разработчика позволяют не парится нулевой монетизизацией этого сайта. Хотя...

Если вам помогла информация, то даже от доната в 40 рублей мне будет приятно. Докину немного, куплю латте в макдаке, вспомню за чей счет банкет и карма вам зачтется!

Но и просто оставленный комментарий благодарности ниже принесет мне улыбку радости :)

А если захочется написать всякие гадости с переходом на личности, да тоже не стесняйтесь, но обычно я отправляю такое в спам. Люблю, когда дома чисто.

Добавить комментарий

Напишите свой комментарий, если вам есть что добавить/поправить/спросить по теме текущей статьи:
"JavaScript — скрываем объект через какое-то время"