当淡化一些没有背景颜色或图像的文本时,使用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/
更新
我找到了一个解决方法,可以在下面的答案中找到,任何其他解决方案或解决方法,仍然很有用。
答案 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')
});