Cancel timer hoverIntent

Question

I have used the jQuery and hoverIntent plugin many times for dropdown menus and advanced navigation, which should be a little more elegant. But I ran into a problem.

I have a menu with an interactive li element that also has a hang. If someone clicks on it before the intent timer fires, I want to unbind it only because it looks better.

I can’t understand how, at first, the designer, the encoder is the second. This is what the intention calls:

$('#navigationContainer ul li').hoverIntent(configDown);

He got a configDown variable that defines sensitivity, etc. And two functions called slideUp and slideDown. Everything works perfectly.

If someone clicks on the same element, I want to cancel hoverIntent. Any help would be appreciated.

Answer 1

Instead of canceling hoverIntent, change the code inside the hoverIntent callbacks to first check if it is pressed li:

var configDown = {
    slideUp: function () {
        if ($(this).hasClass('no-intent')) return;
        // slide up
    },
    slideDown: function () {
        if ($(this).hasClass('no-intent')) return;
        // slide down
    }
};

$('#navigationContainer ul li').click(function () {
    $(this).addClass('no-intent');
}).hoverIntent(configDown);

If you have a good delay on hoverIntent, it can be difficult to run it correctly (you can click the button right after hoverIntent starts), but the main idea is for you to configure.