proefkip proefkip - 1 year ago 75
Javascript Question

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 raw.
I think I have to use or clearqueued or preventdefault,to avoid that but no idea how. Someone can 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>




Answer Source

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

});