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

时间:2012-10-17 17:10:38

标签: jquery css transparency alpha-transparency

我发现这样做的所有示例都假设您有一个jpg或其他没有透明度的图像,例如this tutorial

现在,如果我将其应用于具有阴影效果的PNG,则图像会加倍,阴影会有效地变暗两倍。

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

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

没有delay()的主图片淡出:http://jsfiddle.net/ZKnKs/1/

主要图片因delay()而消失:http://jsfiddle.net/ZKnKs/2/

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

我的问题是,我怎样才能让这个过程平滑过渡而不闪烁,但也不会让阴影倍增?

可以将阴影分成另一张图像,但这似乎是一种相当不优雅的解决方法。

谢谢!

1 个答案:

答案 0 :(得分:0)

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

我想要的是从精灵表中选择一个按钮,例如this。无论这些变量如何,都能够顺利地淡入一个状态:

  • 精灵表的Alpha透明度
  • 背景颜色或颜色
  • 过渡速度
  • (可选)缓和类型

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

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

但通常有一种解决方法。