具有透明度的图像上的 jQuery 悬停过渡答案

【问题标题】：jQuery hover transition on images with transparency具有透明度的图像上的 jQuery 悬停过渡
【发布时间】：2013-03-02 05:26:49
【问题描述】：

我发现的所有示例都假设您有 jpg 或其他不透明的图像，例如 this tutorial。

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

如果我在副图像淡出时淡出主图像，则会出现闪烁效果，可以在主图像淡出时使用delay() 将其最小化，但它仍然很明显。

没有delay()的主图像褪色：http://jsfiddle.net/ZKnKs/1/

使用delay(): http://jsfiddle.net/ZKnKs/2/ 淡化主图像

对于最后一个，我可以通过在 mouseleave 部分中没有 delay() 来减少效果，但不够我喜欢。

我的问题是，我怎样才能让这个过渡平滑，既不闪烁又不加倍阴影？

我可以将阴影分离到另一个图像中，但这似乎是一种相当不雅的解决方法。

谢谢！

【问题讨论】：

别让你难为情。您已经重叠了两个图像，因此最简单的解决方案是简单地从“over”图像中删除阴影。在我看来，这不是一个不优雅的解决方法......只是优化和编写更少的代码。
@ComputerArts 这是我在工作过程中不得不处理的很多事情。解决方法需要更多的 HTML/CSS 和更多的图像导出难度，以及更大的图像文件大小。从长远来看，仅在代码中找到解决方案会省去很多麻烦。
我明白你的意思，但我不同意 100% :-P。如果您想创建相同的效果，HTML/CSS 将是相同的，并且文件大小实际上会稍微小一些，因为您将拥有更少的像素数据。我认为没有编码解决方案。为了达到你想要的效果，你需要交叉淡入淡出图像。伟大的！但是当两个图像的不透明度都达到 50% 时，就会出现“闪烁”。你怎么能避免这种情况？我看到它的唯一方法是使用不同的“悬停”图像（没有阴影......就像这个：clients.computerarts.ca/other/stack/pdf-download.png
这里是我想说的一个简化的小提琴：jsfiddle.net/ZKnKs/6 相同的 HTML，相同的 CSS（几乎，我删除了不透明度），更小的图像。多一点工作？可以，但不一定取决于您的源文件的制作方式。
是的，这就是我最终所做的，它不适用于所有情况，但适用于 99% 的情况。感谢您的帮助。

【解决方案1】：

我很确定我问的是不可能的。

我想要的是有一个来自精灵表的按钮，例如this。无论这些变量如何，都能够平滑地淡入一个状态到下一个状态：

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

或者我可以让它运行得相当慢，比如 1-2 秒的动画，但这也行不通。

但通常有一种解决方法。

【讨论】：