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

OR：

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

JSFIDDLE

Answer 2

“fadeOut”淡化元素然后设置一个display：none;这意味着它不再占用DOM中的空间。因为它从鼠标下移动，所以mouseout事件会触发，导致它再次淡入。

如果您为不透明度设置动画。它将淡出但仍然占用DOM内的空间，因此您的鼠标仍然在元素上。直到你用鼠标输出它才会消失。

$('.ani-bounce-slow').hover(function(){
    $(this).animate({ opacity: 0 }, 800);
}, function(){
    $(this).animate({ opacity: 1 }, 800);
});

http://jsfiddle.net/9sftLjk8/7/

jQuery mouseenter / mouseleave故障

2 个答案:

JSFIDDLE