1

我目前正在使用此代码：

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

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

我正试图让它淡入这个新类。目前，有一个 <li> 里面有一张图片，没有背景。添加“下一个”类时，它会在悬停时为其提供背景图像。有没有办法在新类中淡入淡出而不使图像闪烁/淡入淡出？

4

1 回答 1

3

如果您安装了 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(...

编辑：

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

于 2010-05-17T20:31:41.363 回答