Question

这是问题的一个小提琴：

这里是标记（从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时会发生什么，我该如何帮助它呢？

Answer 1

这是Firefox上的已知错误：https://bugzilla.mozilla.org/show_bug.cgi?id=656948

有一个黑客可以避免这种情况：http://jsfiddle.net/7v7Rg/ 您必须将动画设置为0.999不透明度，等待片刻（一秒钟对我有用）并将不透明度设置为1.

Answer 2

很抱歉，我花了这么长时间才分心...... :( 无论如何，如果你不知道自己的话，你的答案是...... 神奇的是文本对齐：中心，但是请务必像这样更改你的jquery代码（注意：“表格”）：

$(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;}

Answer 3

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

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

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

动画不透明度时，JQuery闪烁，不透明度达到1

3 个答案: