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

我们使用以下内容对div进行动画处理，然后在mouseout上恢复其原始状态。

一切正常，但是直到我们将鼠标悬停在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')
})}})

在此先感谢您的帮助！

最佳答案

这对您的情况有用吗？

$('#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块，可以使代码更整洁，并减少进入不一致状态的可能性。

另外，如果您的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')
    })
});

关于javascript - jQuery mouseout动画仅在第二次悬停后触发，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20619486/