在懸停時更改背景圖像時保持瀏覽器不閃爍

Question

尋找在特定元素被覆蓋時平滑過渡兩個背景圖像的方法？我試過了我可能想到的一切。

的背景圖片風格：

padding: 0 
margin: 0 
border: 0 
background: #232930 url(../inc/alfaExt.jpg) 0 0 fixed 
-webkit-background-size: cover 
-moz-background-size: cover 
-o-background-size: cover 
background-size: cover 
background-repeat: no-repeat 
transition: background .3s 

和這裏的JS：

$('.siteButton').hover(function(){ 
    $('body').css({'background': '#232930 url(../inc/' + this.id + 'Ext.jpg)'}); 
}); 

瀏覽器會閃爍白色時，我趕緊元素之間進行切換。我已經刪除了轉換並將圖像預加載到瀏覽器緩存中，沒有運氣。

我知道精靈/位置的解決方案，但我需要這些圖像來填充身體完全沒有重複。我用精靈做的每一個測試都沒有解決。

Answer 1

您可以添加動畫到圖像的交易，儘量

$('.siteButton').hover(function(){ 
$('body').css({'background': '#232930 url(../inc/' + this.id + 'Ext.jpg)'}).fadeIn(200); 

}）;