マウスが最初のアニメーションを完了する前にマウスを離した場合、mouseoutが呼び出されない

Question

私はフリップアニメーションを作成し、うまく動作しているトリガを使用してトリガーしました。 しかし、最初のアニメーションを完了する前にマウスを離すと、handlerOutをコールしません。 設定されたタイムアウトでアニメーションが作成されます。これは問題のある場所です。

アニメーション中にマウス出力を確認する方法はありますか？

function mouse_enter(){ 
    var Row = $(this); 
    var flipCard = Row.find('.flip-card'); 

    flipCard.addClass('is-visible').removeClass("is-invisible").addClass('flip'); 


     setTimeout(function() { 

      flipCard.addClass('unflip'); 
     }, 501); 

     setTimeout(function() { 

      flipCard.addClass('animated'); 
     }, 1002); 
} 

function mouse_out(){ 
    var Row = $(this); 
    var flipCard = Row.find('.flip-card'); 






    if (flipCard.hasClass('animated')) { 


     flipCard.removeClass('unflip'); 

     setTimeout(function() { 
        flipCard.addClass('flip360'); 
       }, 501); 


      setTimeout(function() { 
        flipCard.removeClass('animated').removeClass('is-visible').addClass('is-invisible') 
       }, 1000); 

      setTimeout(function() { 
        flipCard.parents('.grid-s-0').find(':visible').removeClass('flip360').removeClass('flip'); 
       }, 1003); 

}; 

} 


function imageFlip() { 

    $(".grid-s-0").hoverIntent(mouse_enter, mouse_out); 
} 

imageFlip(); 

Answer 1

上記のコードでmouse_enter関数にjquery mouseoutを追加すると解決します。最初のアニメーションを完成させずにマウスを離れると、これは所望のクラスをトリガして適用します。

$(Row) .on('mouseleave', function() { 

if (!flipCard.hasClass('animated')) { 
    flipCard.removeClass('unflip'); 
    flipCard.removeClass('flip').removeClass('animated').removeClass('is-visible').addClass('is-invisible'); 

}