jQuery鼠标/鼠标故障

Question

当我在盒子里盘旋时，它就会不断地消失。我不知道为什么，也不知道这仅仅是在我的浏览器(Siri)上，但你必须稍微玩一下，才能意识到我的问题。

当我呆在战场上的时候，我试着把它淡出，当我离开它的时候，我又把它淡入其中。

这是小提琴

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

"fadeOut“淡出元素，然后设置一个显示类: none；这意味着它不再占用DOM中的空间。因为它是从鼠标下面移动的，所以鼠标退出事件触发，导致它再次进入fadeIn。

如果你把不透明度动画化了。它将fadeOut，但仍然占用DOM中的空间，所以鼠标仍然在元素上。它不会褪色的，直到你鼠标离开。

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

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

Answer 2

当你悬停在你的盒子上时，它就消失了，所以没有盒子了(因此你的功能在鼠标射击上)。

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

CSS：

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

联署材料：

$('.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