如何使背景圖片的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/