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

avoid mouse detection before end animation

本文关键字：鼠标 检测 结束 动画      更新时间：2023-09-26

我的动画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>

我想这就是你要找的:

小提琴联系

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

相关文章：