Question

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

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

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

我考虑过.addClass（）方法，但我不确定在哪里添加它（或者如果这是最好的事情）。

编辑：这是我试过的一个小提琴：http://jsfiddle.net/J93NR/1/

Answer 1

你不需要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/

Answer 2

如果您使用的是jQuery UI，可以选择使用switchclass()

使用该类进行动画处理

更新

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

Answer 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来实现这一点。这正是您链接的网站上的人正在做的事情。

Answer 4

代码中存在语法错误：试试这个：

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

您可以选择a代码，将鼠标悬停在菜单的可见区域之外的方式悬停在li标签上，试试这个：

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

或：

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

淡入CSS类

4 个答案: