JQuery: how to add a delay to mouseleave, so if someone accidentally disconnects an element by accident, it still remains open

Question

The hoverintent plugin is the opposite of what I need. I have a .popup that starts with .trigger when I am away from it, I want .popup to NOT fade out for a few seconds, but if I sag, then hover again, cancel the fading that should happen and don't open. popup.

Does anyone know how I will do this?

This does NOT work, but it was an idea:

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

Answer 1

jQuery The HoverIntent plugin is exactly what you are looking for.

timeout , OUT out.

- hover:

-: "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();
});