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

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

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

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

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

jquery mouseover mouseenter mouseleave
person android.nick    schedule 28.01.2011    source источник

Ответы (4)


arrow_upward
11
arrow_downward

подключаемый модуль jQuery HoverIntent - это именно то, что вам нужно.

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

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

тайм-аут: простая задержка в миллисекундах перед вызовом функции 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)
 }

РЕДАКТИРОВАТЬ:

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

person stephen776    schedule 28.01.2011
comment
Есть настройки для точной настройки всего. Свойство timeout устанавливает задержку перед вызовом функции out. - person stephen776; 28.01.2011
comment
Таким образом, функция startHover покажет ваше всплывающее окно, а функция endhover удалит его. Тайм-аут установит задержку перед вызовом конечной функции при наведении курсора мыши на область ... достижение желаемого эффекта. - person stephen776; 28.01.2011
comment
Отредактировано для включения вашей логики fadeIn / fadeOut - person stephen776; 28.01.2011

arrow_upward
3
arrow_downward

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

$('.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 с тех пор.

person Dejan Milosevic    schedule 25.12.2013
comment
для всех, кто наткнется на это, как я: есть решение, очень похожее на это, которое мне понравилось больше. например, условие if ($(this).blur() = true) совершенно неверно imo. - person sashn; 15.02.2016

arrow_upward
1
arrow_downward

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

person Andy    schedule 28.01.2011

arrow_upward
0
arrow_downward

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

$(".triger").mouseenter(function() {
    $(this).find("popup").fadeIn();
}).mouseleave(function() {
    $(this).find("popup").delay(200).fadeOut();
});
person Banago    schedule 26.10.2012
comment
Это НЕ РАБОТАЕТ, потому что, когда вы вернетесь, наведя указатель мыши на .triger в течение времени задержки, он все равно исчезнет ... только с задержкой 200. - person thorinkor; 19.02.2014