jquery - jqueryで背景画像をフェードインさせる方法

Question

ホバーするとフェードインする画像のCSSの行があります。

#social-links a:hover span  { background: url("/images/hover-light.jpg") no-repeat scroll -4px 42px transparent; }

それは機能し、jqueryからのフェードイン効果を追加したいと思います。複数spansあるので、識別子thisが必要だと思いますが、しばらくの間jqueryを使用しておらず、覚えていません。

Answer 1

$('#social-links a').mouseleave(
   function() {
     $(this)  // anchor tag from which mouseleave happen
       .find('span')
       .css({ 'background': 'your background css' })
});

あなたfadeIn()ができること：

$('#social-links a').mouseleave(
   function() {
     $(this)  // anchor tag from which mouseleave happen
       .find('span')
       .fadeIn();
});

Answer 2

背景画像のフェードの完璧な例を次に示します。少し変更するだけで、目的にぴったりです。

http://www.jasperrooswinkel.com/smooth-fullscreen-background-slideshow-in-jquery/