Simple Color FadeIn Hover Jquery with WordPress site

Simple Color FadeIn Hover Jquery with WordPress site

I'm looking to incorporate the following Jquery Snippet (color fadeIn on
Hover) with my WordPress website located at http://www.threecell.com/demo.
The code is included below based on how I've adapted it to the current
menu tag structure. I've loaded the Jquery in my functions.php file.
$(document).ready(function(){
//Set the anchor link opacity to 0 and begin hover function
$("#menu-sample-menu li a").hover(function(){
//Fade to an opacity of 1 at a speed of 200ms
$(this).fadeOut(0).addClass('hover').fadeIn(300);
//On mouse-off
}, function(){
//Fade to an opacity of 0 at a speed of 100ms
$(this).fadeOut(300)
.queue(function(){ $(this).removeClass('hover').fadeIn(0).dequeue() });
});
});
The relevant menu styles are included here:
#access {
padding:0 20px;
background:#111;
box-shadow:0 0 7px rgba(0, 0, 0, .1);
}
#access ul {
float:left;
padding:0;
margin:0;
list-style:none;
font-weight:600;
text-transform:uppercase;
}
#access li {
position:relative;
float:left;
padding:0;
margin:0;
}
#access ul li:first-child {
padding-left:0;
}
#access a {
display:block;
padding:15px 24px;
color:#f0f0f0;
text-decoration:none;
}
#menu-sample-menu li {
color: black;
text-shadow: 0px 1px 4px #777;
background-color: green;
padding: 0 12px 0 12px;
}
#menu-sample-menu li a.hover {
background: orange;
}
#access li.current_page_item > a,
#access li.current-menu-item > a {
background: orange;
color: white;
text-decoration:none;
}
#access a span {
color:#999;
font-size:11px;
font-style:italic;
font-weight:normal;
line-height:1.62em;
text-transform:none;
}
Thus far, the hover state isn't being triggered. Any assistance or
guidance would be most appreciated.
Best regards,
T