jquerycss-animationshoverintent

mouseout not called if mouse leave before completing first animation, Hoverinternt


I have created a flip animation and trigger using hoverintent working fine. but when mouse leave before completing first animation it dont call handlerOut. animation is created with set timeout this is where the problem is.

Is there any way i can check mouseout during animation.?

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

Solution

  • It solve for me to add jquery mouseout in mouse_enter function in above code. if mouse leave without completing first animation this will trigger and apply the desired classes.

    $( Row ) .on('mouseleave', function() {
    
    if (!flipCard.hasClass('animated')) { 
        flipCard.removeClass('unflip');
        flipCard.removeClass('flip').removeClass('animated').removeClass('is-visible').addClass('is-invisible');
    
    }