アニメーションを終了する前にマウスが検出されないようにします。

my animation blink（）イメージ（.stone）を非常にゆっくりと消して、ページが準備できたら実行し、再びonmouseoutを実行します。私の問題は、アニメーション中にマウスが上（。ストーン）を上回っているときに、何度も連続して実行されるときです。私は、それを避けるために、どうやってどうやってどうやって使うか、クリアするか、デフォルトを避けなければならないと思います。助けてもらえますか？アニメーションを終了する前にマウスが検出されないようにします。

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

出典

2016-08-25 proefkip

私はそれはあなたが探しているものだと思う：

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

});

出典

2016-08-25 10:58:59

私は解決策が好き、私はそれを使用すると思います。ありがとうございますが、未来のためにアニメーションが完全に実行されるまでマウスオーバーの検出を避けることができるかどうかを知りたいと思っています。 – proefkip

あなたの希望で@私の答えを更新しましたhappy coding –

アニメーションを終了する前にマウスが検出されないようにします。

答えて

関連する問題