Jquery 如果鼠标在完成第一个动画之前离开,则不调用mouseout,Hoverinternt
我已经用hoverintent创建了一个翻转动画和触发器。 但当鼠标在完成第一个动画之前离开时,它不会调用handlerOut。 动画是在设置超时的情况下创建的,这就是问题所在 在动画制作过程中,有什么方法可以检查鼠标移出吗Jquery 如果鼠标在完成第一个动画之前离开,则不调用mouseout,Hoverinternt,jquery,css-animations,hoverintent,Jquery,Css Animations,Hoverintent,我已经用hoverintent创建了一个翻转动画和触发器。 但当鼠标在完成第一个动画之前离开时,它不会调用handlerOut。 动画是在设置超时的情况下创建的,这就是问题所在 在动画制作过程中,有什么方法可以检查鼠标移出吗 function mouse_enter(){ var Row = $(this); var flipCard = Row.find('.flip-card'); flipCard.addClass('is-visible').removeClas
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();
在上面的代码中,在mouse\u 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');
}