在结束动画之前避免鼠标检测

Question

我的动画blink() 使一个图像(.stone) 消失得非常慢，它在页面准备好时执行，然后再次onmouseout。我的问题是当鼠标在动画中移动到 (.stone) 上方时，它将连续执行几次。我想我必须使用或 clearqueued 或 preventdefault 来避免这种情况，但不知道如何。有人可以帮忙吗？

<SCRIPT>
$(document).ready(function(){blink();});

   function blink(){
        $(".stone").animate({opacity:0},10000);
    };
  
   
    $(".stone").on('mouseover',function () {
        
        $('.stone').animate({opacity:1},100);
        $(".stone").clearQueue();
        });

    $(".stone").on('mouseout',function (){blink();});
                  
</SCRIPT>

<body>
    <div id='conteneur'class='responsiveeinstein'><div class='stone'class='responsiveeinstein'><a href='photos.html'><img src='image1/stone aloneintro.jpg'class='responsiveeinstein'/></a></div><div class='stone2'><img src='image1/stone9.jpg'class='responsiveeinstein'/></div><div><a href='photos.html'><h1 id='elementClignotant'>Einstein</h1></a></div></div>
</body>

Answer 1

我想这就是您要找的：

fiddle link

$(document).ready(function(){
    var isAnimationFinished = false;
    blink();

    function blink(){
        isAnimationFinished = false;
        $(".stone").animate({opacity:0},10000,function() {
             isAnimationFinished = true;
        });
    };


    $(".stone").on('mouseover',function () {
         if(isAnimationFinished){
           $(".stone").stop();
           $('.stone').animate({opacity:1},100);
         }
    });

    $(".stone").on('mouseout',function (){blink();});

});

在结束动画之前避免鼠标检测

avoid mouse detection before end animation

javascript

jquery

mouseover

preventdefault