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/