CSS3 Text Shadow& Opacity Bug - [Jquery中的[fadeOut()/ fadeIn()]

时间:2011-02-24 14:00:46

标签: jquery fade css3

当淡化一些没有背景颜色或图像的文本时,使用jquery fadeOut,fadeIn和fadeToggle存在一个已知问题。 (文本在转换过程中有绿色抗锯齿的东西)

以此为例。 jQuery cycle: fading white text becomes "green" in Windows/Firefox/Cleartype Enabled

我最近发现使用css 3 text-shadow也会发生这种情况,遗憾的是你无法在文本阴影上设置背景颜色,是否有人有任何解决方案或解决方法?

以下是错误/问题的示例

http://jsfiddle.net/blowsie/2UMJ4/


更新

我找到了一个解决方法,可以在下面的答案中找到,任何其他解决方案或解决方法,仍然很有用。

4 个答案:

答案 0 :(得分:1)

我刚刚找到一种可以在某些情况下使用的解决方法..

http://jsfiddle.net/blowsie/2UMJ4/8/

通过使用rgba opacity,您可以重新创建某些颜色并使文本阴影渐变,而不会出现抗锯齿问题。

text-shadow:50px 50px rgba(0,0,0,0.2);

答案 1 :(得分:0)

它似乎不是jQuery的问题,而是Chrome / Webkit中的一个错误,因为当你直接给出元素opacity时也会发生错误。

除了报告并在修复之前避免它,我想不出你能做多少。

答案 2 :(得分:0)

就像RoToRa在评论中所说,你可以使用rgba将color属性的不透明度降低到0.99。如果您不想更改所有颜色属性,请快速修复此问题。对我很有用

$('*').css('color', function(index, value) {
    return value.replace('rgb', 'rgba').replace(')', ', 0.99)');
});

修改:请确保您仅针对您需要的浏览器(我认为只有Chrome)使用此修补程序,因为旧浏览器不支持rgba。

答案 3 :(得分:-1)

此代码会将元素淡出为不可见,然后将其淡入。

$('#button').click(function() {
    $('h1').css({'text-shadow':'none'}).fadeToggle('slow')
});

请参阅:http://jsfiddle.net/2UMJ4/10/