Javascript jQuery鼠标输出动画仅在第二次悬停后触发

我们将使用以下命令在悬停时设置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版本支持，建议您在上使用它

$('#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')
    })
});

---

因此，它在启动时是可见的，或者条件失败，这意味着下一个元素没有打开的类，并且是事件处理程序中的事件处理程序，如果是，则会导致奇怪的问题，因此不会正确缩进代码。您正在悬停处理程序中绑定mouseout。不要那样做。