javascript - 实现 JavaScript 褪色图像鼠标悬停和鼠标移出效果的最佳方法是什么？

Question

我想 jQuery 将是用于执行此操作的库。我当然可以弄清楚如何在鼠标悬停时切换图像的来源，然后在鼠标移开时将其切换回来。但是我怎样才能通过图像淡入淡出来实现这种效果呢？

我已经尝试使用 jQuery Cycle 插件来实现这一目标，但没有成功。我觉得也许有一种更简单的方法可以做到这一点。我很感激您的帮助，有什么想法吗？

Answer 1

将图像放入 DIV 中，并将 DIV 的背景设置为第一张图像。在 DIV 中放置图像标签并将 SRC 指向第二个图像。

现在您可以调整 IMG 的不透明度，暴露其后面的背景图像，而无需交换任何内容。

使用.opacity()

确保在包装器 DIV 上放置尺寸，否则一旦内部图像的不透明度为零，它就会消失。

<div class="wrapper">
   <img src="..." />
</div>