Question

我目前正在使用此代码：

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

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

我正试图让它淡出这个新课程。目前，有一个＆lt; li＆gt;带有图像，没有背景。当添加“下一个”类时，它会在悬停时为其提供背景图像。有没有办法在不使图像闪烁/褪色的情况下淡入新课程？

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：

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

jQuery的：

hover()有两个功能。一个是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(...

修改

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

jQuery li带有图像淡入背景（淡入淡出）

1 个答案: