Deactivate mouseenter event then reactivate once animations have finished

Question

I have the following code which executes some animations etc. when the user hovers over an element, however if they "enter" and "leave" the element with the mouse rapidly and repeatedly it messes up the animations. How can I deactive the mousenter event and then reactivate it once animations have finished?

$(".women .text").on("mouseenter", function(event) {
            event.preventDefault();
            $( ".men .intro" ).hide();
            $('.women').delay(300).animate({width:"80%"});  
            $('.men').delay(300).animate({width:"20%"});    
            $('.men').animate({opacity: 0.5}, 500); 
            $('.women').animate({opacity: 1}, 500);
            $( ".women .intro" ).delay(600).fadeIn(300);
        });

Thanks!

Answer 1

Change the timer to whatever timespan you want

var mouseEntered = false;

$(".women .text").on("mouseenter", function(event) {
            event.preventDefault();

            if(mouseEntered == false)
            {
                mouseEntered = true;
                $( ".men .intro" ).hide();
                $('.women').delay(300).animate({width:"80%"});  
                $('.men').delay(300).animate({width:"20%"});    
                $('.men').animate({opacity: 0.5}, 500); 
                $('.women').animate({opacity: 1}, 500);
                $( ".women .intro" ).delay(600).fadeIn(300);
                window.setTimeout(function() {
                    mouseEntered = false;
                }, 1000);
            }
        });