如何使用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/