创建一个与图像大小完全相同的 div。此 div 将应用第二个图像的背景图像。然后在其中放置一个内联图像。
<div id="kitten" style="background-image: url(dog.jpg);">
<img src="/images/kitten.jpg" alt="Kitten" />
</div>淡入淡出内联图像将显示/隐藏第二个（背景）图像。
$("#kitten").hover(function(){
$(this).find("img").fadeOut();
}, function() {
$(this).find("img").fadeIn();
});
不错的效果，感谢分享。
在 fadeOut 返回后才会调用 fadeIn()，因此虽然简单，但在视觉上仍有很大的改进空间。
这太糟糕了。它先淡出第一个，然后淡入另一个。
你没有做到你所说的：将一个图像淡入另一个图像。
你读过这篇文章吗？包含的 DIV 具有等于第二个图像的背景图像。当您将鼠标悬停在 IMG 元素上时，它会淡出，显示第二个图像（以容器 DIV 及其 BG 图像的形式）。当您将鼠标移出时，IMG 会淡入，覆盖容器 DIV 背景，并再次显示第一个图像（IMG 元素）。
您只需重复命令即可返回到开头。这个人很乐意发布内容。说真的。
谢谢
谢谢，非常有用
它不起作用，请帮忙？
我想实现类似于本页面“PROPS”中所做的效果……谢谢
酷 :)
我将在我的网站上使用它，谢谢 :)
Ashley
值得注意的是，使用
.fadeOut()和.fadeIn()，元素将设置为display: none;，从而失去其尺寸。如果您要淡入淡出，只需更改不透明度即可$("#kitten").hover(function(){$(this).find("img").animate({opacity: 0}, 500);
}, function() {
$(this).find("img").animate({opacity: 1}, 500);
});
或者您可以动画化属性 visibility: hidden; 它将在保持隐藏的同时继续占用元素之前占据的空间。
这就是我需要的……除了我需要它适用于多个图像，因此我无法使用 ID，并且需要在悬停时 div 不消失。在 @visualidiot 在 Forrst 的帮助下，这是想出的解决方案
<div class="fade">
<img src="/images/kitten.jpg" alt="Kitten" />
</div>
$(".fade").hover(function(){
$(this).find("img").stop(true,true).animate({opacity: 0}, 400);
}, function() {
$(this).find("img").stop(true,true).animate({opacity: 1}, 400);
});
要增加或减少淡入淡出时间，请将 400 调整为您需要的任何值（值越高，时间越长，值越低，时间越短）。
我在我的网站 http://www.prefektesfest.at 上使用了一些更复杂的东西来实现相同的效果。查看底部的 jquery 代码，因为它可以完美地处理许多图片
似乎无法在我的电脑上运行。
我看到了背景 limage 和某种淡入淡出的边框，但我的主图像显示为损坏的链接。
真的非常棒 :D
但是……它不起作用，请帮我看看，这是我的代码
$(“#kitten”).hover(function(){
$(this).find(“img”).fadeOut();
}, function() {
$(this).find(“img”).fadeIn();
});
哇！正是我一直在寻找的！谢谢！
简洁明了。代码片段应该就是这样。谢谢！
为什么不在一行中淡出第一个图像，下一行中淡入第二个图像呢？这样，淡入淡出可以同时进行，而无需使用背景技巧？
简洁明了。代码片段应该就是这样。谢谢！
非常有趣的效果，但要注意 CPU 资源。
主要问题是，哪张图片应该淡出，哪张图片应该淡入