jQuery悬停在透明图像上的转换

我发现的所有例子都假设你有一个jpg或者其他没有透明度的图像，比如

现在，如果我将其应用于具有阴影效果的PNG，图像会加倍，阴影实际上会变暗两倍

如果在次映像淡出的同时淡出主映像，则会出现闪烁效果，可以通过主映像淡出时的

delay（）

将其最小化，但仍很明显

在主图像不褪色的情况下：

主图像在无延迟的情况下衰减（）：

主图像随

延迟而褪色（）

：

对于最后一个，我可以通过在mouseleave部分中不使用

delay（）

来减少效果，但这还不够我喜欢

我的问题是，我怎么能让这是一个平滑的过渡，没有闪烁，但也没有阴影加倍

我可以将阴影分割成另一个图像，但这似乎是一个相当不雅观的解决办法

---

谢谢

我很确定我所要求的是不可能的

我想要的是有一个从精灵表按钮，如。为了能够平稳地从一种状态过渡到下一种状态，而不考虑这些变量：

• 精灵表的Alpha透明度
• 背景的颜色
• 过渡速度
• （可选）缓解类型

问题是如果它是透明的，总是会有一些重叠（如果零件重叠的颜色相同或不透明，这可能很好），或者根本没有重叠，这会导致闪光

或者我可以让它走得相当慢，比如1-2秒的动画，这也不起作用

---

但通常都有解决办法。

不要让事情变得对你不利。您已经将两个图像重叠，因此最简单的解决方案是简单地从“覆盖”图像中移除阴影。在我看来，这不是一个不雅观的解决办法。。。只是优化和编写更少的代码。@ComputerArts这是我在工作过程中不得不处理的事情。该解决方案需要更多的HTML/CSS和更大的图像导出难度，以及更大的图像文件大小。从长远来看，仅在代码中找到解决方案将节省很多麻烦。我理解你的意思，但我不100%同意：-P。如果你想创建相同的效果，HTML/CSS将是相同的，文件大小实际上会稍微小一些，因为你将有更少的像素数据。我认为没有编码解决方案。为了达到你想要的效果，你需要对图像进行交叉淡入淡出。伟大的但当两幅图像都达到50%的不透明度时，就会出现“闪烁”。你如何避免这种情况？我看到它的唯一方法是使用一个不同的“悬停”图像（没有阴影…像这样：这里有一个简化的小提琴我想说的：相同的HTML，相同的CSS（几乎，我删除了不透明度），更小的图像。需要更多的工作吗？是的，但不一定取决于源文件的制作方式。是的，这就是我最后所做的，它不适用于所有情况，但适用于99%的情况。谢谢你的帮助。