淡入 CSS 类答案

【问题标题】：Fade In CSS class淡入 CSS 类
【发布时间】：2012-05-02 13:16:47
【问题描述】：

我想知道如何使用 jquery 淡入 css 类。我正在寻找的效果有点像你在这里看到的：https://squareup.com/

到目前为止我尝试过的是：

$(document).ready(function() {
    $('.mini-nav li').hover(function () {
    $('.hover').fadeIn(slow);
};
});

我考虑过 .addClass() 方法，但我不确定在哪里添加它（或者这是否是最好的做法）。

编辑：这是我尝试过的一些东西：http://jsfiddle.net/J93NR/1/

【问题讨论】：

为什么不直接改变css
您要链接到的站点仅在不同时间使用不同元素的常规淡入/淡出以及看起来像 this 的 css 精灵来执行此操作。
谢谢@adeneo，如果我使用的是图像背景，我会像你提到的那样使用css sprites（也许是jquery .animate）。不过，我的背景只是 rgba 颜色。
@Connor：使用带有背景颜色的 CSS 过渡只是对 CSS 的单行更改，请参阅：jsfiddle.net/ZAgnY

标签： jquery html fadein css

【解决方案1】：

代码中有语法错误：试试这个：

$(document).ready(function() {
    $('.mini-nav li').mouseenter(function () {
    $('.hover').fadeIn("slow");
    });
});

您可以改为选择a 标签，将鼠标悬停在您的 li 标签上，以使它们悬停在菜单的可见区域之外，试试这个：

http://jsfiddle.net/J93NR/3/

或：

http://jsfiddle.net/J93NR/4/

【讨论】：

谢谢@stealthninja，这有帮助，但我的情况有点不同。我会做一个小提琴。
我喜欢你的第二把小提琴...我将它复制到我的页面中，但它不起作用！ :( 我正在加载 jquery，所以我知道不是那样（我的页面上有其他 js）。
@Connor 你添加了css的class .hover 吗？ .hover { background-color: #000 !important}
@Raminson 是的，我有 .hover
@Connor 嗯，使用firebug控制台，看看有没有错误。

【解决方案2】：

如果您使用的是 jQuery UI，则可以选择使用 switchclass() 的类进行动画处理

更新：

$("element").addClass("classname").fadeIn("slow");

【讨论】：

谢谢，我看到了它的用处，但我只需要添加类（带有淡入淡出），而不是做任何切换。

【解决方案3】：

<style type="text/css">
#leaf,#leaf:before{background:url(sprite.png)}
#leaf{position:relative}
#leaf:before{content:'\0020';position:absolute;top:0;left:0;display:none}
</style>

<!-- more html -->

<ul id="menu">
  <li id="leaf"><a href="#">Link</a></li>
</ul>

<!-- more html -->

<script type="text/javascript">
$(document).ready(function () {
  $('.min-nav li').hover({
    // Handler in
    function () {
      $("#leaf:before").fadeIn("slow");
    },
    // Handler out
    function () {
      $("#leaf:before").fadeOut("slow");
    }
  });
});
</script>

当然，也可以使用 CSS3 而不是 jQuery 来实现。这正是您链接的网站上的人正在做的事情。

【讨论】：

【解决方案4】：

您不需要 jquery，纯 CSS 解决方案要简单得多 (fiddle)：

<div class="outer"><div class="inner"></div></div>

.outer {
    background: url(...);
}
.inner {
    background: url(...);
    opacity: 1;
    transition: opacity 0.3s;
}
.inner:hover {
    opacity: 0;
}

http://jsfiddle.net/ZAgnY/

【讨论】：

-1 这在将内容添加到outer div 或inner div jsfiddle.net/Curt/hByb8/1 时不起作用。
@Curt：没问题，Square 示例里面没有任何文本。不过，对于 OPs 原始小提琴，solution is even simpler
我在 OP 示例中没有注意到这一点。 +1 很好的解决方案。编辑了投票的答案
我会选择这个，因为它很简单，还有所有奇怪的 js 问题。谢谢。
优雅、简单的解决方案。谢谢，@LieRyan +1