是否可以使用jQuery动画属性更改？ [重复]

Question

这个问题在这里已有答案：

• cross-fade images in jQuery 1回答
• jquery cross fade two images 3回答

在将鼠标悬停在其父元素上之后，我需要更改“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

将两个图像放在容器中。将“悬停”设置为opacity:0。然后使用.thumbnail:hover并选择第二个图像，给它opacity:1。在图像上拍打transition: opacity 1s;，你就完成了。