如果鼠标在完成第一个动画之前离开，则不会调用 mouseout，Hoverinternt

Question

我使用 hoverintent 创建了翻转动画和触发器，效果很好。但是当鼠标在完成第一个动画之前离开时，它不会调用 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');

}

如果鼠标在完成第一个动画之前离开，则不会调用 mouseout，Hoverinternt

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

jquery

hoverintent

css-animations