jQuery li 图像在背景中淡入淡出（在类中淡入淡出）

Question

我目前正在使用这段代码：

var gallery = $('ul#gallery').children();

$(gallery).filter(':even').not(':last').hover(function () {$(this).toggleClass('next')});

我正在尝试让它淡入这个新类。目前，有一个

;里面有图像，没有背景。添加“下一个”类时，将鼠标悬停在其上方时会为其提供背景图像。有没有办法在新类中淡入淡出而不使图像闪烁/淡出？

Answer 1

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

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

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

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

如果您确实想要这种效果，另一种方法可能是在您为该类提供的元素前面添加一个单独的元素，并淡入该元素（及其背景图像）。

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

你最终会得到类似这样的结果：

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:

<ul id='gallery'>
        <li>
            <div class='background'></div>  // Prepend and fade in
            <div class='content'>hi there</div>
        </li>
</ul>

jQuery:

hover() 有两个函数。一个是当您鼠标进入时，另一个是当您鼠标离开时。

// 将所有 .background 元素的不透明度设置为 0
$('.background').css({不透明度: 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(...

---

编辑：

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