proefkip proefkip - 3 months ago 14
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

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

});
Comments