Question

当用户将鼠标悬停在某个元素上时，我有以下代码执行一些动画等，但是如果他们用鼠标“进入”并“快速”“重复”该元素，则会混淆动画。我如何取消激活鼠标输入事件，然后在动画完成后重新激活它？

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

取消激活mouseenter事件，然后在动画完成后重新激活

1 个答案: