jquery - 具有透明度的图像上的 jQuery 悬停过渡

Question

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

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

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

没有主图像褪色：http: //jsfiddle.net/ZKnKs/

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

主图像褪色delay()：http: //jsfiddle.net/ZKnKs/2/

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

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

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

谢谢！

Answer 1

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

我想要的是从这样的精灵表中获得一个按钮。无论这些变量如何，都能够平滑地淡入一个状态到下一个状态：

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

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

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

但通常有一种解决方法。