How to add a class with a fade in effect in jQuery?

[aditya2071990]

Here is my code... any idea on why it aint working?

$(document).ready(function(){
$("#home_btn").hover(
function(){
$(this).addClass("grayBack").fadeIn("slow");
}
);
}
);

I chained the action of adding a class with the fade in effect...did I do it wrong?

And here's the HTML:

<div class="navigation">
        	<ul class="nav-list"> 
            <li id="home_btn">
            	HOME 
            </li>
            <li id="about_btn">
            	ABOUT US
            </li>
            <li id="team_btn">
            	TEAM
            </li>
            <li id="port_btn">
            	PORTFOLIO
            </li>
            <li id="propty_btn">
            	<a href="properties.php">
	                PROPERTIES
                </a>
            </li>
            <li id="dwnld_btn">
            	DOWNLOADS
            </li>
            <li id="contact_btn">
            	CONTACT US
            </li>
            </ul>            
    </div>

[aditya2071990]

I forgot to give the CSS:

.navigation{
position:absolute;
}
.nav-list{
position:relative;
width:130px;
top:350px;
left:105px;
list-style-type:none;
font-family:"Segoe UI", Tahoma;
font-weight:520;
text-align:center;
font-size:1.2em;
z-index:1;
}
#home_btn{
padding-bottom:17px;
}
#about_btn{
padding-bottom:18px;
}
#team_btn{
padding-bottom:19px;
}
#port_btn{
padding-bottom:19px;
}
#propty_btn{
padding-bottom:17px;
}
#dwnld_btn{
padding-bottom:19px;
}
#contact_btn{
padding-bottom:19px;
}
.grayBack{
background-color:#999999;
}

[Jeff Mott]

Hover takes two arguments. You only have one.

http://docs.jquery.com/Events/hover#overout

[aditya2071990]

It seems that the thing got confused on what to do when the mouse hovers out, as I didn't specify that, and so it refused to execute the function...