JQuery: как добавить задержку в mouseleave, так что если кто-то случайно случайно наведет элемент, он останется открытым

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 plugin - это именно то, что вы ищете.

Свойство 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

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

Answer 3

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

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

Answer 4

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

$('.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 окна объект, поскольку навсегда.