当元素不再悬停时，停止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;
}

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