JQuery flickers when animating opacity and opacity reaches 1

Here is the scenario of the problem:

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

Here's the markup (copied + pasted from jsfiddle, so script tags etc are missing):

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);                    
                  });

      

If I animate the opacity of 0.9999, that's fine. What happens when transparency reaches 1 and how can I help it?

+3


source to share


3 answers


This is a known bug in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=656948



There is a hack to avoid this correspondence: http://jsfiddle.net/7v7Rg/ You should animate to 0.999 opacity, wait a minute (one second works for me) and set the opacity to 1.

+4


source


Sorry I got distracted for so long ... :( Anyway, here's your answer if you don't figure it out ... The magic is in text-align: center BUT be sure to change the jquery code like this (NOTICE: "table") :

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

      



Here's a Fiddle

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

}

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

      

0


source


I think it has something to do with GPU acceleration. I tested my theory by adding the following:

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

      

With this in place, I think the font renders and fades out where in your jsfiddle it gets re-emitted when the opacity reaches 100%. This may or may not be an issue in IE9 / 10 / Gecko browsers; you'll have to check there and see if you can fool the acceleration by smoothing the text.

0


source







All Articles