基本的JavaScript mouseOver和mouseOut腳本出現故障

Question

我試圖做一個基本的JavaScript效果，當您將鼠標懸停在縮略圖上時，縮略圖將淡化為.5的不透明度，並顯示一個覆蓋的div。 我有適當的效果，但是由於某種原因，腳本有錯誤，動畫滯后。 有人可以向我解釋為什么會這樣嗎？

我的劇本：

HTML

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

Java腳本

    <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()過渡（ 文檔 ）：

$('.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);
});

小提琴

正如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;
}

小提琴