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


    CSS Howto..

    css image not showing up

    CKEditor — How can I add document-specific CSS styles

    How to use a JQuery Show/Hide script, to show hidden text

    How do you extend a Django project root HTML file in project apps?

    JS/CSS. How do I force a child div to the bottom of it's parent div

    how to make a child div visible when clicking its parent div in pure css

    How to add a hiding delay to Full CSS Dropdown Vertical Menu

    How to include display:block in css code that includes pseudo element 'before'

    How to display an image from a dropdown menu selection?

    How do I add an image to a progress bar in HTML/CSS?

    How to read different CSS classes with the same beginning with jquery?

    Show overlay in background when hovering over parent menu items

    How to specify an element to re-appear after a page break?

    How to style Menu border/outline in JavaFX8 using CSS?

    CSS: How to make a block to cover all width of parent block

    How to style HTML5 input type=“datetime-local” [duplicate]

    CSS/Bootstrap: How to stretch containers within cols full-height?

    How to edit the element.style css?

    How to center child divs along each side of a parent div

    How to create straight line with same css gradient at both ends?

    How do I make current menu item active in asp.net webforms

    How to let a div behave like another div?

    How to find the css file name associated with an element?

    How to make background color extend all the way to bottom of page / content?

    How to use CSS on autocomplete textbox selected values

    How do I differentiate between two different images in the same class in my CSS file

    jQuery slideshow image delay

    How to overflow in CSS/HTML? [closed]

    How can I make an image continue across multiple sections with breaks in between?

    How to wrap text of html button with fixed width