jQuery opacity animation aliasing in Chrome -

i trying animate text opacity jquery animate. i've noticed when opacity value set 1, bad anti-aliasing effect appears after animation in chrome (version 35.0.1916.153): see image below.

$('#good').animate({     opacity:'0.99' }, 2000);  $('#bad').animate({     opacity:'1' }, 2000); 

jsfiddle

i've tested in safari (version 5.1.7), firefox (version 18.0.1) , works well. i've tried add font smoothing filter suggested here doesn't seem work. known issue?

jsfiddle div

$( document ).ready(function() {    $('#good').animate({opacity: 0.4}, 2000, false, null);     $('#bad').animate({opacity: 1}, 2000, false, null); }); 

jsfiddle <p>

your mistake dont use ready event

i recomended use css animation without js css animation jsfiddle

.pick-opacity_1 {     -webkit-animation: opacity_1 2s;     -webkit-animation-direction: alternate;     -webkit-animation-iteration-count: 1; }  @-webkit-keyframes opacity_1 {     {         opacity: 0;     }     {         opacity: 1;     } }  .pick-opacity_2 {     -webkit-animation: opacity_2 5s;     -webkit-animation-direction: alternate;     -webkit-animation-iteration-count: 1; }  @-webkit-keyframes opacity_2 {     0% {         opacity: 1;     }     25% {         opacity: 0.1;     }     50% {         opacity: 0.3;     }      75% {         opacity: 0.6;     }      100% {         opacity: 1;     } } 

updated: test 0.99 jsfiddle animation opacity