固定文本在 chrome 上 jquery 动画淡入淡出时变得奇怪

Question

JavaScript

$(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 中，文本在淡入淡出时会变得很奇怪——看起来该文本正在丢失 cleartype。

我该如何解决？

褪色效果如何：Click to see

解决方案： 设置 -khtml-opacity:0.99;在 mouseleave 上将其设置为 0.99。 safari 和 chrome 可以正常工作:)

Answer 1

你不能为了快乐而修复它，但你确实有选择。

1. 将 webkit 背面设置为隐藏（与下面一样，我也发现这修复了许多 webkit 显示错误）http://jsfiddle.net/FSkXL/

2. 将元素设置为 0.9 而不是 1。这将通过保持“奇怪”http://jsfiddle.net/7YNhM/

来防止文本更改（更一致）

3. 您可以使用图像而不是文本、png 或 svg，这意味着文本不可编辑 webtext

4. 画布标签，大量额外的复杂性

这是 chrome 如何呈现文本的基本部分，但没有一个干净的方法来解决它。

Answer 2

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

但是我以前遇到过这个错误。我发现，对于动画，Chrome 有时会使文本模糊或变形（CSS3 过渡也是如此）。我认为这与您的硬件加速和图形设置有关。

正如this post 中的另一位用户所指出的，Chrome 似乎在处理 jQuery 的 hover() 事件时遇到了困难，所以也许您可以使用不同的方法：

$(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 */
}