jQuery mouseenter/mouseleave 故障

Question

当我将鼠标悬停在框中时，它会连续淡出和淡入。我不知道为什么或者是否只在我的浏览器(Siri)上出现这种情况，但你必须稍微尝试一下才能意识到我的问题。

当我留在现场时，我尝试将其淡出，并在离开时再次淡入。

这是fiddle

HTML:

<div class="ani-bounce-slow"></div>

CSS:

div {
    height: 200px; 
    width: 200px; 
    background-color: #3c3;
}

jQuery:

$('.ani-bounce-slow').mouseenter(function() {
    $('.ani-bounce-slow').fadeOut('slow');
});
$('.ani-bounce-slow').mouseleave(function() {
    $('.ani-bounce-slow').fadeIn('slow');
});

Answer 1

当您将鼠标悬停在框上时，它会淡出，因此那里不再有框(因此您的 mouseleave 函数会触发)。

在这种情况下，更好的方法是使用不透明度:

CSS:

div {
    height: 200px; 
    width: 200px; 
    background-color: #3c3;
    transition: opacity 1s;
}
.fade {
    opacity: 0;
}

JS:

$('.ani-bounce-slow').mouseenter(function () {
    $('.ani-bounce-slow').addClass('fade');
})
$('.ani-bounce-slow').mouseleave(function () {
    $('.ani-bounce-slow').removeClass('fade')
});

或者:

$('.ani-bounce-slow').hover(function () {
  $(this).toggleClass('fade');
});

JSFIDDLE