Question

我们使用以下内容在悬停时为div设置动画，然后在mouseout上动画回原始状态。

一切正常，但是鼠标输出直到我们第二次在div上空盘旋时才开始。在那之后，它完美地运作。

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

jQuery mouseout动画仅在第2次悬停后触发

1 个答案: