Fade In CSS class

Question

I'm wondering how I can fade in a css class with jquery. The effect I'm looking for is sort of like what you see here: https://squareup.com/

What I've tried so far is this:

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

I thought about the .addClass() method, but I'm not sure where to add it (or if that is the best thing to do).

EDIT: Here is a fiddle of something I've tried: http://jsfiddle.net/J93NR/1/

Answer 1

you don't need jquery for this, a pure CSS solution is much simpler (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

<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>

Of course it would also be possible to achieve this with CSS3 instead of jQuery. Which is exactly what the guys from the website you linked are doing.