基本 javascript mouseOver 和 mouseOut 脚本有问题

Question

我正在尝试制作基本的 javascript 效果，当您将鼠标悬停在缩略图上时，缩略图将淡入 0.5 不透明度，并且会出现叠加层 div。我有到位的效果，但由于某种原因，脚本有问题并且动画滞后。有人可以向我解释为什么会这样吗？

我的脚本：

Html

<div class="thumbnailholder">
    <div class="thumbnaildesc">
            Lester Beall poster blah blah
    </div>
        <img class="thumbnail" src="img.jpg"/>
    </div>

Javascript

    <script>

$('.thumbnailholder')

.mouseenter(function () {
    $(this).find('.thumbnaildesc').fadeIn(400);
    $(this).find('img.thumbnail').fadeTo("fast", 0.5); })

.mouseleave(function () {
    $(this).find('.thumbnaildesc').stop(true).fadeOut(400);
    $(this).find('img.thumbnail').stop(true).fadeTo("fast", 1); })


</script>

谢谢！

Answer 1

只设置不透明度的动画，以防止 fadeIn、fadeOut 和 fadeTo 出现问题。出现这些问题是因为 fadeOut 导致 display: none，它比隐藏多一点。事实上，display: none 禁止用户进一步与该元素交互，并实际上将其从 DOM 中删除。所以事情可能会出问题。

过渡 .animate() (documentation):

$('.thumbnailholder')
.mouseenter(function() {
    $(this).find('.thumbnaildesc').animate({opacity: 1}, 400);
    $(this).find('img.thumbnail').animate({opacity: 0.5}, 400);
})
.mouseleave(function() {
    $(this).find('.thumbnaildesc').animate({opacity: 0}, 400);
    $(this).find('img.thumbnail').animate({opacity: 1}, 400);
});

Fiddle

如 Simon H 所述：纯粹的 CSS 解决方案会更高效，尤其是当您有很多缩略图时：

.thumbnailholder {
    position: relative; 
}
.thumbnailholder img {
    opacity: 1;
    transition: opacity .4s ease-in-out;
}
.thumbnailholder:hover img {
    opacity: .5;
}
.thumbnailholder p {
    position: absolute;
    top: 0;
    opacity: 0;
}
.thumbnailholder:hover p {
    z-index: 100;
    opacity: 1;
    transition: opacity .4s ease-in-out;
}

Fiddle

基本 javascript mouseOver 和 mouseOut 脚本有问题

Basic javascript mouseOver and mouseOut script being glitchy

html

javascript

mouseenter

mouseleave