我想知道如何使用 jquery 淡入 css 类。我正在寻找的效果有点像你在这里看到的：https ://squareup.com/
到目前为止，我尝试过的是：
$(document).ready(function() {
$('.mini-nav li').hover(function () {
$('.hover').fadeIn(slow);
};
});
我考虑过 .addClass() 方法，但我不确定在哪里添加它（或者这是否是最好的做法）。
编辑：这是我尝试过的一些东西：http: //jsfiddle.net/J93NR/1/
您不需要 jquery，纯 CSS 解决方案要简单得多（小提琴）：
<div class="outer"><div class="inner"></div></div>
.outer {
background: url(...);
}
.inner {
background: url(...);
opacity: 1;
transition: opacity 0.3s;
}
.inner:hover {
opacity: 0;
}
如果您使用的是 jQuery UI，则可以选择使用switchclass()使用类进行动画处理
更新：
$("element").addClass("classname").fadeIn("slow");
<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 来实现这一点。这正是您链接的网站上的人正在做的事情。
代码中有语法错误：试试这个：
$(document).ready(function() {
$('.mini-nav li').mouseenter(function () {
$('.hover').fadeIn("slow");
});
});
您可以a改为选择标签，将鼠标悬停在您的 li 标签上，使其样式悬停在菜单的可见区域之外，试试这个：
或者：