jquery - 停用 mouseenter 事件，然后在动画完成后重新激活

Question

我有以下代码，当用户将鼠标悬停在一个元素上时，它会执行一些动画等，但是如果他们用鼠标快速反复地“进入”和“离开”元素，它会弄乱动画。如何停用 mouseenter 事件，然后在动画完成后重新激活它？

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

谢谢！

Answer 1

将计时器更改为您想要的任何时间跨度

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);
            }
        });