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％。显示/隐藏将起作用，而不像现代浏览器那样好。

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

1 个答案: