jQueryを使ってcss：hoverの背景をフェードインする簡単な方法はありますか？

Question

私は、背景を表示するためにホバーを使用するCSSを備えたIMGを持っています。すぐに表示されるのではなく、背景をフェードインするためにjQueryを使用する簡単な方法はありますか？

私の現在のコードは次のとおりです。

HTML: <img id="home-logo" src="path/logo-home.png">` 
CSS: #home-logo:hover { background: url(path/logo-back.png) right bottom no-repeat;} 

Answer 1

が、私はそれを考え出したと、これを行うための最善の方法を発見した背景の代わりに、2枚の画像を使用していました：

HTML: 
    <img id="home-link" src="path/logo.gif"><img id="home-fade" src="path/logo-fade.gif"> 

CSS: 
    #home-link { cursor:pointer; } 
    #home-fade { display:none; } 

JS: 
    $(document.body).hover(function() { 
      $("#home-fade").fadeIn('slow'); 
     },function(){ 
      $("#home-fade").fadeOut('slow'); 
     }); 

Answer 2

はい！これを使用できます。

$('#home-logo').hover(function(){ 
    $(this).fadeIn('slow', function() { 
    //do something 
    }); 
}); 

詳細については、このチュートリアルを参照してください。 fadeIn

Answer 3

不透明度を消す必要があるかもしれません。その場合、fadeToメソッドを使用できます。 最初の引数はdurationまたはspeed、2番目の引数は不透明の値です。

のjQuery CODE：

$('#home-logo').hover(
    function(){ 
     $(this).fadeTo('slow',0.2); 
    }, 
    function(){ 
     $(this).fadeTo('slow', 1.0); 
    }); 

HTMLのCODE：

<img id="home-logo" src="path/logo-home.png"> 

DEMO