Fade In CSS Class

Question

I am wondering how can I disappear in a css class with jquery. The effect I'm looking for is similar to what you see here: https://squareup.com/

What I have tried so far:

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

I was thinking of the .addClass () method, but I'm not sure where to add it (or if this is best done).

EDIT: here is the fiddle of what I tried: http://jsfiddle.net/J93NR/1/

Answer 1

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

If you use jQuery UI, it is possible to animate class usage with switchclass ()

Update:

 $("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> 

Of course, this could also be done using CSS3 instead of jQuery. This is exactly what the guys are doing from the site you are connected to.

Answer 4

There is a syntax error in the code: try the following:

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

---

instead, you can select the a tags that hang on your li tags so that you have their style hanging outside the visible menu area, try the following:

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

or

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