0

次のコードは、ユーザーが要素にカーソルを合わせたときにアニメーションなどを実行しますが、要素をマウスですばやく「入力」および「終了」すると、アニメーションが台無しになります。mousenterイベントを非アクティブにして、アニメーションが終了したら再度アクティブにするにはどうすればよいですか？

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

ありがとう！

4

1 に答える 1

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);
            }
        });
于 2013-02-28T16:12:40.377 に答える