jQuery li，背景中淡化图像（淡入淡出）

我目前正在使用此代码：

var gallery = $('ul#gallery').children(); $(gallery).filter(':even').not(':last').hover(function () {$(this).toggleClass('next')}); 

我试图让它淡入这个新课程。目前，有一个

，里面有一个图像，没有背景。 当添加“下一个”类时，它会在hover时为其提供背景图像。 有没有办法在不使图像闪烁/褪色的情况下淡入新课程？

Answer 1

如果安装了jQueryUI，则可以通过添加持续时间来淡化类的动画。

 $(this).toggleClass('next', 500); 

http://jqueryui.com/demos/toggleClass/

但据我所知，没有单独的不透明度设置只影响背景图像。 因此，如果你想淡化它，你需要淡化整个元素，正如你所说，这不是你想要的。

如果你真的想要这个效果，另一个选择可能是将一个单独的元素添加到你给这个类的元素，并淡入该元素（带有它的背景图像）。

元素需要具有absolute定位，以便它不会影响其余内容。

你会得到类似的东西：

CSS：

 li { position: relative; } .background { width: 100%; height: 100%; background:orange; // This would be your background image instead position: absolute; top: 0; left: 0; } .content { position: relative; } 

HTML：

 
 
 
 // Prepend and fade in 
hi there
 
  

jQuery的：

hover()有两个function。 一个是当你进入mouseenter ，另一个是你的mouseleave 。

//为所有.background元素设置不透明度为0（’。background’）。css（{opacity：0}）;

 var gallery = $('ul#gallery').children(); gallery.filter(':even').not(':last').hover( function () { $(this).find('.background').animate({'opacity': 1}, 500); }, function () { $(this).find('.background').animate({'opacity': 0}, 500); }); 

---

编辑：

仅供参考，您可以更改选择器以立即获得您想要的内容，而无需调用.filter()等。

 var gallery = $('ul#gallery li:even:not(:last)'); gallery.hover(... 

---

编辑：

更改了第一句中的措辞并添加了文档链接。