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

Posted 2023-05-08

【中文标题】固定文本在 chrome 上 jquery 动画淡入淡出时变得奇怪

【英文标题】：FIXED Text Getting weird when jquery animate fade on chrome

【发布时间】：2012-04-15 03:59:26

【问题描述】：

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 可以正常工作:)

【参考方案1】：

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

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

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

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

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

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

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

【讨论】：

到目前为止，我的客户对选项 1 最满意。

我有一个问题：'将 webkit 背面设置为隐藏'，我没有看到任何更改。

检查小提琴。没有它的淡入淡出之前的文本“更大胆”。然后当褪色发生时，它就没有那么大胆了。对于有问题的 css，文本在两种状态下都不是粗体。

【参考方案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 */

【讨论】：

尝试使用 CSS3 过渡，我已经用示例 CSS 更新了我的解决方案

我正在使用这个文档类型：ttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" rel="nofollow" target="_blank">w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

看看我的第一行中的 jsFiddle，如果你在那里遇到同样的错误，这与 Doctype 无关，它是基于硬件的

好吧，我会尝试修复它，如果我找到解决方案，我会发布，谢谢你的帮助:)