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

Question

Плагин hoverintent является противоположностью того, что мне нужно. У меня есть .popup, который запускается .trigger, когда я нахожу его, я хочу, чтобы .popup НЕ исчезал в течение нескольких секунд, но если я выключу, а затем снова включите, отмените затухание и держите .popup открытым.

Кто-нибудь знает, как мне это сделать?

Это не работает, но это была идея:

 $('.trigger').hover(function(){
        $('.popup').fadeIn(600)
    }, function() {
        $('.popup').delay(2000, function(){
            if ($(this).blur() = true) {
                $('.popup').fadeOut(600)
            }
        });
    })

Answer 1

плагин jQuery HoverIntent - это именно то, что вы ищете.

Свойство timeout устанавливает время, в течение которого мышь должна находиться за пределами области перед вызовом функции out.

Цитата с веб-сайта с намерением наведения:

timeout: простая задержка в миллисекундах перед вызовом функции out.Если пользователь вернется к элементу до истечения времени ожидания, функция «out» не будет вызываться (и не будет вызываться функция «over»).Это в первую очередь для защиты от неаккуратных траекторий, которые временно (и неумышленно) отнимают пользователя от целевого элемента ... давая ему время вернуться.Время ожидания по умолчанию: 0

Чтобы установить его ...

$('.trigger').hoverIntent({
     over: startHover,
     out: endHover,
     timeout: 2000
});

Затем определите функции для обработки over и out

 function startHover(e){
    //your logic here
    $('.popup').fadeIn(600)
 }

 function endHover(){
     //your logic here
     $('.popup').fadeOut(600)
 }

EDIT:

Вы также можете настроить свойство interval, чтобы увеличить / уменьшить время срабатывания функции startHover ... по умолчанию установлено значение 100 миллисекунд ... вы можете установить его наноль, чтобы закрыть всплывающее окно, как только мышь войдет в область триггера, если хотите.

Answer 2

Вот самый простой способ сделать это, без дополнительных плагинов:

$('.trigger').hover(function() {
    clearTimeout(this.timer);
    $('.popup').fadeIn(600);
}, function() {
    this.timer = setTimeout(function() { 
        if ($(this).blur() = true) { // off topic: you should to check this condition ;)
            $('.popup').fadeOut(600);
        }
    }, 2000);
});

setTimeout () и clearTimeout () являются встроенными функциями JS объекта HTML DOM Window с тех пор, как навсегда.

Answer 3

Вы можете попробовать использовать плагин jquery hoverintent.

Answer 4

Это работает для меня:

$(".triger").mouseenter(function() {
    $(this).find("popup").fadeIn();
}).mouseleave(function() {
    $(this).find("popup").delay(200).fadeOut();
});