Need help. jquery hover opacity.

[vheiar03]

I'm almost a complete noob at jQuery and need help. Im trying to make the navigation link's opacity change when hovered.



I'm pretty sure I need CSS for the "home" class...

The basic code is....



HTML-
<ul id="navigation">
<li><a href="#" class="home">Home</a></li>




CSS-
#navigation {
list-style: none;
margin: 20px;
padding: 0 none;
width: 525px;
position: relative;
top: 120px;
}

#navigation li {
display: inline;
}

#navigation li a {
text-decoration: none;
padding: 5px 0;
width: 100px;
background-image: url("images/navigationbg.png");
color:#eee;
float: left;
text-align: center;
border-left:1px solid #FFF;
}



jQuery-
$(document).ready(function()
{
$("a.home").hover(
function() {
$(this).stop().animate({"opacity": "0"}, 500);
},
function() {
$(this).stop().animate({"opacity": "1"}, 1000);
});
});

 

[PixelPusher]

The only reason you would need to use javascript for this effect is if you wanted the opacity change to animate (slowly fade in/out). Otherwise you can just use the css opacity/filter properties:

opacity:0.2;  /* values range from 0.0 - 1.0 */
filter:alpha(opacity=25);  /* Used for IE, you will loose font smoothing.  Values from 0 -100 */