固定文本越来越怪异时，对铬jQuery的动画淡出

的JavaScript固定文本越来越怪异时，对铬jQuery的动画淡出

$(function() { 

    $('#lol').hover(function() { 

     $(this).stop().animate({opacity:0.5}); 

    },function() { 

     $(this).stop().animate({opacity:1}); 

    }); 

});

CSS

#lol { 
padding:20px; background-color:#FF0000; color:#FFF; font-size:15px; font-family:arial; width:300px; opacity:1; filter:alpha(opacity=100); position:relative; 
}

HTML

<div id="lol">text</div>

在Firefox和Internet Explorer工作正常，但在Chrome中，文本在淡入淡出时变得很奇怪 - 看起来文本正在丢失明文类型。

我该如何解决？

如何，它看起来与衰落：Click to see

解决方案： -khtml设置不透明度：0.99;并在mouseleave上设置为0.99。 Safari和铬将工作正常:)

来源

2012-03-31 Robson Silveira

你不能解决它是开心，但你有选择。

集webkit的背面隐藏（下同十岁上下，我也觉得这个修正了许多的webkit显示错误）http://jsfiddle.net/FSkXL/
设置元素到0.9，而不是1。这将防止从文本改变（更一致），通过保持其“怪异” http://jsfiddle.net/7YNhM/
你可以使用图片代替文字，PNG或SVG，这意味着文本不会成为可编辑webtext
canvas标签，吨的额外的复杂性

这是Chrome浏览器如何呈现文本的基本组成部分，而且只是没有它周围的清洁方式。

来源

2012-03-31 23:24:35 Fresheyeball

我的客户对选项1至今都非常满意。 – Fresheyeball 2012-03-31 23:25:40

我有一个问题：'将webkit背面设置为隐藏'，我没有看到任何改变。 – 2012-04-01 00:41:35

检查小提琴。如果没有它，淡出之前的文本是'更大胆'。然后当淡出发生时，它不像大胆。在问题中，这两种状态下的文本都不是粗体。 – Fresheyeball 2012-04-01 19:12:36

它适用于我：文本不会改变。其他人可以通过查看jsFiddle来证实。

但我以前遇到过这个bug。有了动画，我发现，Chrome有时会模糊或变形文字（也与CSS3转换一起）。我认为这是关于你的硬件加速和图形设置。

正如指出的在this post其他用户，Chrome浏览器似乎与jQuery的悬停（）事件的困难，因此，或许你可以用不同的方法：在复制相同

$(function() { 
    $("#lol"). 
    mouseenter(function(){$(this).animate({opacity:0.5}, 900);}). 
    mouseleave(function(){$(this).animate({opacity:1}, 900);}); 
});

你也可以有一个镜头功能，但与CSS3：

#lol 
{ 
    opacity:1; 
} 
#lol:hover 
{ 
    transition: opacity:0.5; 
    -moz-transition: opacity:0.5; /* Firefox 4 */ 
    -webkit-transition: opacity:0.5; /* Safari and Chrome */ 
    -o-transition: opacity:0.5; /* Opera */ 
}

来源

2012-03-31 22:55:00 hohner

我会试试看，谢谢。 – 2012-03-31 23:09:28

它没有工作，相同的结果;/ – 2012-03-31 23:11:21

尝试使用CSS3转换，我已经更新我的解决方案与示例CSS – hohner 2012-03-31 23:15:14

固定文本越来越怪异时，对铬jQuery的动画淡出

回答

相关问题