Mijn xhtml


<ul>
<li id="about"><a href="about.htm">ABOUT</a> </li>
<li id="work"><a href="work.htm">WORK</a></li>
<li id="contact"><a href="contact.htm">CONTACT</a></li>
</ul>

mijn CSS


ul {
list-style: none;
}

#about {
width: 67px;
height: 24px;
margin-left: 21px;
margin-bottom: 6px;
}

#work {
width: 57px;
height: 24px;
margin-left: 31px;
margin-bottom: 6px;
}

#contact {
width: 88px;
height: 24px;
}

li {
text-align: center;
}

li a {
display: block;
text-decoration: none;
font-family: Arial, Helvetica, sans-serif;
font-size:16px;
color: #FFF;
font-weight:bold;
padding-top: 3px;
}

#about a {
background-image:url(images/menuAbout.jpg);
background-position: bottom;
}

#about a:hover {
background-image:url(images/menuAbout.jpg);
background-position: top;
}

#work a {
background-image:url(images/menuWork.jpg);
background-position: bottom;
}

#work a:hover {
background-image:url(images/menuWork.jpg);
background-position: top;
}

#contact a {
background-image:url(images/menuContact.jpg);
background-position: bottom;
}

#contact a:hover {
background-image:url(images/menuContact.jpg);
background-position: top;
}

mijn javascript / jQuery


$('#about a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate(
{backgroundPosition:"(0 -143px)"},
{duration:500})
})
.mouseout(function(){
$(this).stop().animate(
{backgroundPosition:"(0 0)"},
{duration:500})
})

Maar dit werkt niet ... wat doe ik fout ...

Heb je wel de jquery op de server/local staat ?

Het is al opgelost, was vergeten een bepaalde plugin te downloaden (stom) :p