Chrome中的jQuery不透明度動畫別名

我試圖用jQuery設置動畫文字不透明度。我注意到，當不透明度值設置爲1時，在Chrome中的動畫（35.0.1916.153版）中出現壞消除鋸齒效果：請參見下圖。Chrome中的jQuery不透明度動畫別名

Opacity antialiasing effect in Chrome

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

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

jsFiddle

我在Safari進行了測試（5.1.7版本），Firefox（版本18.0.1）和它的作品很好。我試圖添加字體平滑過濾器建議here，但它似乎沒有工作。這是一個已知的問題嗎？

來源

2014-06-26 Giorgio

JSFIDDLE與格

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

JSFIDDLE與<p>

你的錯誤是你不使用ready event

我recomended使用CSS動畫沒有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 { 
    from { 
     opacity: 0; 
    } 
    to { 
     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; 
    } 
}

已更新： TEST 0.99 JSFIDDLE ANIMATION OPACITY

來源

2014-06-26 07:17:05 isxaker

謝謝，但我的目標是將不透明度設置爲1（這是發生問題的值）。 – Giorgio

@Giorgio，我編輯了我的答案。請嘗試。 – isxaker

不幸的是，它不起作用，我已經向OP添加了一個圖像來澄清問題。即使使用文檔準備好（並且將＃＃「不透明度」設置爲0.99以進行比較），效果也是相同的。 – Giorgio

Chrome中的jQuery不透明度動畫別名

回答

相關問題