如何使用Jquery和.fadeIn效果交换悬停时的图像？

标题说明了一切。如何使用JQuery和.fadeIn效果在悬停时交换图像

我有一个标签，里面有黑白图像。当你悬停在链接上方时，我希望黑白图像与彩色版本交换并淡入。我正在寻找与此网站上的照片类似的效果：

我的黑白图像命名约定以_bw结尾，而我的彩色图像名称相同，没有_bw

这是我的HTML：

<a href="link.html" class="item"><img src="images/cool_restaurant_bw.jpg" alt="Cool Restaurant" width="200" height="300"></a>

我的代码不起作用。有什么建议吗

---

提前感谢大家

我会做一件稍微不同的事情，那就是将彩色图像作为链接的背景图像，而不是交换源。如果你交换光源，它将无法从一幅图像淡入另一幅图像——为了实现这一点，它们必须同时存在

相反，我将添加一个小函数，用于遍历所有图像并将彩色图像设置为背景图像：

$('.item').each(
    function() {
        var colorbg = $(this).find('img').attr('src').replace("_bw", "");
        $(this).css('background', 'url(' + colorbg + ')');
    }
);

您还必须向链接添加一些CSS：

.item {
    display: block;
    height: 300px;
    width: 200px;
}

然后，您可以仅设置图像动画，使其以您希望的方式在悬停时淡入淡出：

$('.item').hover(
    function() {
        $(this).stop().animate({"opacity": "0"}, 0);
        $(this).find('img').stop().animate({"opacity": "0"}, 0);
        $(this).stop().animate({"opacity": "1"}, 500);
    },
    function() {
        $(this).find('img').stop().animate({"opacity": "1"}, 0);
    }
);

（上述功能首先使链接和图像“不可见”，然后在链接（即彩色图像）中淡出。）

---

这里有一个小问题（使用不同的图片源）：

除非您使用图像预加载程序，否则在更改

src

时，您将遇到加载问题

最好加载所有图像（注意顶部图像上的

显示：无；

）

然后使用jQuery

toggle（）

和

fadeIn（）fadeOut（）

函数。
如果您不希望悬停开始时出现白色闪烁（与您发布的链接相同），则可以删除

toggle（）

语句

$（“.item”）。悬停(
函数（）{
//淡入
$（this.find（“.bottom image”）.toggle（0）；
$（this.find（'.top image'）.fadeIn（500）；
}，函数（）{
//淡出
$（this.find（“.bottom image”）.toggle（0）；
$（this.find（'.top image'）.fadeOut（500）；
}
);
。底部图像，
.头像{
位置：绝对位置；
}
.底图{
背景色：#777；
}
.头像{
显示：无；
背景色：#33a；
}

在这里：---->
$（this.attr（“src”）。替换（“\u-bw”，）
，用什么替换
“\u-bw”
？您缺少一个参数。您需要将其更改为
$（this）.attr（“src”）.replace（“\u bw”，”）
非常感谢您的回答。我正在寻找一个整体效果，即原始图像消失，然后新图像快速出现在同一位置。我编辑了OG文章，其中有一个链接指向我试图复制的效果。@NicholasSmith我已经更新了脚本，使其与您发布的链接具有相同的效果。你介意检查一下小提琴，看看你是不是这么想的吗？谢谢Tims。这太完美了。我不认为我能用position:absolute实现这一点，但我找到了一种方法让它工作。这太完美了。谢谢你的帮助。
$('.item').hover(
    function() {
        $(this).stop().animate({"opacity": "0"}, 0);
        $(this).find('img').stop().animate({"opacity": "0"}, 0);
        $(this).stop().animate({"opacity": "1"}, 500);
    },
    function() {
        $(this).find('img').stop().animate({"opacity": "1"}, 0);
    }
);