ホバーで背景画像を変更するときにブラウザが点滅しないようにする

Question

特定の要素を上に乗せたときに2つの背景画像をスムーズに切り替える方法をお探しですか？私は、私が考えている可能性のあるすべてを試しました。

のBG画像のスタイルは、次のとおりです。

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

}）;