当元素不再悬停时停止 jQuery 悬停效果

Question

我的脚本：

$(window).load(function(){
    $(".inner").hover( function (e) {
        $(this).find(".info").stop().fadeIn(410);
    }, function() {
        $(this).find(".info").stop().fadeOut(410);
    });
});

当我将鼠标悬停在 div .inner 上时，它会播放动画，但当我快速将鼠标移出并再次移入时，它会停在我鼠标移出的地方，以使其更容易。

http://www.sakesalverda.nl/projects/ 并将鼠标悬停在网站图像上，然后快速将鼠标移出并再次悬停该网站的图像，您会看到它不会完全制作动画

Answer 1

肯定有一个 jQuery 解决方案，但我会为此使用 CSS，它更容易，而且在大多数情况下性能更好：

.inner .info {
    opacity: 0;
    -webkit-transition: opacity .42s;
    transition: opacity .4s;
}
.inner:hover .info {
    opacity: 1;
}

适用于所有major browsers，但IE8 would need a fallback。一个缺点是，IE8 和 IE9 不会有褪色效果，但在我看来，这是我们可以承受的死亡，因为这些浏览器现在只有 5%。显示/隐藏也可以，只是不如现代浏览器那么好。