当使用JQuery动画透明度时，透明度达到1时会闪烁。

Question

这是一个问题的示例：

http://jsfiddle.net/MaXaS/2/

以下是该示例的标记（因为从jsfiddle复制+粘贴，所以脚本标记等缺失）：

tr
{
    visibility:hidden;
    background-color:#cccccc;
}

<table>
    <thead>            
        <th style='width:100px'>Bibble</th>
        <th style='width:100px'>Fish</th>
    </thead>
    <tbody>
    <tr>
        <td>Some data!</td>
        <td>Some more data!</td>
    </tr>
    </tbody>
</table>

$(document).ready(function()
                  {
      $('tr').css('visibility', 'visible').css('opacity', 0).animate({ opacity: 1 }, 2000);                    
                  });

如果我将透明度动画到0.9999，这是可以的。当透明度达到1时发生了什么，我该如何解决？

- NibblyPig

---

你用的是什么浏览器来查看这个页面？在谷歌浏览器中它似乎运行良好。 - Curtis

我正在使用Firefox - 我同意，它在Chrome中也能正常工作！ - NibblyPig

为什么不尝试对整个表格应用CSS，而不是针对每一行（tr）应用CSS呢？这样可以减少负载，因为它将CSS应用于整个表格而不是所有行... 演示：http://jsfiddle.net/MaXaS/12/ - Paresh Balar

在我的电脑上，它也在Firefox中正常工作。 - Starx

我正在逐行淡入 =) - NibblyPig

Answer 1

这是Firefox上已知的一个bug：https://bugzilla.mozilla.org/show_bug.cgi?id=656948 有一个hack可以避免这种行为：http://jsfiddle.net/7v7Rg/。您必须将动画设置为0.999不透明度，等待一段时间（对我而言，一秒钟有效），然后将不透明度设置为1。

- Sébastien Bernery

---

这样做有点效果，但并不完美。在 Webkit 浏览器中也是如此。 - Jonathan

还没有测试，但是设置-webkit-transform: translate3d(0, 0, 0);和其他浏览器的相应设置是否可以解决这个问题，即使不透明度为100%，也可以强制GPU启动？否则，在100%不透明度下，GPU会将渲染交给CPU而导致闪烁。更多信息请参见：http://davidwalsh.name/translate3d - Geert-Jan

Answer 2

抱歉花了这么长时间，我被分心了...:( 无论如何，如果你自己没有弄明白，下面是你的答案... 关键在于text-align:center，但务必像这样更改你的jquery代码（注意："table"）：

$(document).ready(function() {
$('table').css('visibility', 'visible').css('opacity', 0).animate({opacity: 1 }, 2000);
 });

这里是Fiddle。

table
{
visibility:hidden;
background-color:#cccccc;
width:385px;
margin:0 auto;

}

td{text-align:center;}
th{text-align:center;}

- Dejo Dekic

---

是的，这是更好的方法... jsfiddle.net/MaXaS/12 - Dejo Dekic

我们正在接近目标，在fiddle中似乎可以工作，但在我的代码中存在标题未正确对齐的问题...我将尝试更新fiddle以展示它。 - NibblyPig

好的！请更新你的Fiddle，这样我们就可以看到问题 :) - Dejo Dekic

这个怎么样？http://jsfiddle.net/MaXaS/13/ 尝试取消注释display:block看看。东西会被聚集在一起，我猜因为它不再是表格行，所以忽略了对齐规则。 - NibblyPig

http://jsfiddle.net/8QJPv/1/ 是一个更简单的例子，当您增加第一个标题的宽度时，<tr> 与其不匹配。 - NibblyPig

好了，抱歉让你久等了:( - Dejo Dekic

Answer 3

我认为这与GPU加速有关。我通过添加以下内容来测试我的理论：

tr {
   -webkit-font-smoothing: antialiased;
}

有了这个设置，我认为字体被渲染并淡化了，在你的jsfiddle中，当不透明度达到100％时，它会重新渲染。这可能在IE9/10 / Gecko浏览器中是一个问题或不是问题; 你需要在那里测试并查看是否可以通过对文本进行抗锯齿来欺骗加速。

- bogeylicious