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
Редактирано, за да включи вашата логика за изчезване/затихване - 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