是否可以使用jQuery动画属性更改？

Question

将鼠标悬停在其父元素上后，我需要更改“img”元素的“src”属性。

我有这个HTML：

<div class="thumbnail">
    <img src="img/1_thumb.jpg">
</div>

我需要将src值从“img / 1_thumb.jpg”更改为“img / 1_thumb_hov.jpg”

我用这个jQuery代码

做到了

$('.thumbnail').hover(function() {
    $(this).children(0).attr('src', 'img/1_thumbnail_hov.jpg');
}, function() {
    $(this).children(0).attr('src', 'img/1_thumbnail.jpg');
});

但正如你所知，这只会做一个快速的改变，如果可能的话我想让它褪色。

非常感谢你，如果你能帮我解决这个问题。

Answer 1

将两个图像放入容器中。设置＆＃34;悬停＆＃34;一到opacity:0。然后使用.thumbnail:hover并选择第二张图片，为其提供opacity:1。在图片上拍下transition: opacity 1s;，然后就完成了。