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

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

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

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

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

4 ответов

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

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

цитата с веб-сайта hover intent:

тайм-аут: Простая задержка в миллисекундах перед вызовом функции" 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 миллисекунд...вы можете установить его на ноль, чтобы запустить всплывающее окно, как только мышь войдет в область триггера, если хотите.

10

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

$('.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 с навсегда.

3

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

1

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

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