mouseout nicht aufgerufen, wenn Maus verlassen vor Abschluss der ersten Animation, Hoverinernt

Question

Ich habe eine Flip-Animation erstellt und triggern mit Schwebeflug funktioniert gut. aber wenn die Maus vor dem Abschluss der ersten Animation verlässt, ruft sie nicht den Befehl handlerOut auf. Animation wird mit set timeout erstellt, wo das Problem liegt.

Gibt es eine Möglichkeit, Mouseout während der Animation zu überprüfen.?

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

Es löst für mich jquery mouseout in mouse_enter Funktion in obigem Code hinzuzufügen. Verlässt die Maus, ohne die erste Animation zu beenden, werden die gewünschten Klassen ausgelöst und angewendet.

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

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

}