Question

我试图制作一个基本的javascript效果，当你将鼠标悬停在缩略图上时，缩略图将淡入.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。实际上，.animate()禁用了与元素的进一步用户交互，并实际上将其从DOM中删除。所以事情可能会变得很糟糕。

转换为$('.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); });（documentation）：

.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

提到Simon H：纯CSS解决方案会更高效，特别是如果你有很多缩略图：

{{1}}

Fiddle

基本的javascript mouseOver和mouseOut脚本是毛病的

1 个答案: