How to prevent mouseenter event action with jQuery

Tags: javascript,jquery,css,css-animations

Problem :

I have this simple mouseenter : mouseleave action:

call = $('.js-call');

call.on({
    mouseenter: function(e){
       // animation
       e.stopPropagation();
    },
    mouseleave: function(e){
        // animation
    }
});

In this action i have two CSS animations, which have a duration of 300ms. How can I prevent mouseover event for animation end, and fire it again if i'm properly on call element. When i moving fast on my call element action call many times. How to prevent it? Thx for help.

---

Solution :

I would go with placing timeouts on both events, and activate the animation only if at the end of that timeout you still meet a condition. Something like that:

var timeoutIn, timeoutOut, delay = 300;
$element.hover(
    function() {
        if (timeoutOut){
            clearTimeout(timeoutOut);
        }
        timeoutIn = setTimeout(function() {
            // ##################
            // 'MOUSEENTER' STUFF GOES HERE
            // ##################
        }, delay);
    },
    function() {
        if (timeoutIn){
            clearTimeout(timeoutIn);
        }
        timeoutOut = setTimeout(function() {
            // ##################
            // 'MOUSELEAVE' STUFF GOES HERE
            // ##################
        }, delay);
    }
);

Update: I've just created a jQuery plugin called jQuery.hoverDelay.js, you can check it out here: jQuery hoverDelay.js