Search code examples
javascriptjquerymouseoverpreventdefault

avoid mouse detection before end animation

my animation blink () make an image (.stone) disappear very slowly, it is executed when the page is ready, and then onmouseout again. My problem is when during the animation the mouse is going above (.stone) then it will be executed several times in a row. I think I have to use or clearqueued or preventdefault, to avoid that but no idea how. Can someone help?

<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>

Solution

  • I think that's what you are looking for:

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

});