javascript - jQuery mouseout 动画仅在第二次悬停后触发

Question

我们使用以下代码在悬停时为 div 设置动画，然后在鼠标移开时动画回到其原始状态。

一切正常，但是在我们第二次将鼠标悬停在 div 上之前，mouseout 不会触发。之后，它就完美地工作了。

$('#navigation-captions>li>a')
.hover(function(){
    if(!$(this).next().is(".open")) {
    $(this).next().css({'visibility' : 'visible'}).animate({opacity: 1}, 150).addClass('open')
    }else if ($(this).next().is(".open")) {
    $('#navigation-captions>li>a').mouseout(function(){
    $(this).next().stop().animate({opacity: 0}, 150, function(){$(this).next().css({'visibility' : 'hidden'})}).removeClass('open')
})}})

在此先感谢您的帮助!

Answer 1

这对您的情况有用吗？

$('#navigation-captions>li>a').hover(function() {
    $(this).next().css({'visibility' : 'visible'}).stop().animate({opacity: 1}, 150).addClass('open');
}).mouseout(function() {
    $(this).next().stop().animate({opacity: 0}, 150, function(){
        $(this).next().css({'visibility' : 'hidden'}).removeClass('open')
    })
});

该事件总是第一次有效。删除 if block ，使代码更清晰，并不太可能进入不一致状态。

此外，如果您的 jQ 版本支持，建议您使用 on()。

$('#navigation-captions>li>a').on('hover', function() {
    $(this).next().css({'visibility' : 'visible'}).stop().animate({opacity: 1}, 150).addClass('open');
}).on('mouseout', function() {
    $(this).next().stop().animate({opacity: 0}, 150, function(){
        $(this).next().css({'visibility' : 'hidden'}).removeClass('open')
    })
});