Jquery Background-position Animation With Css Sprites Not Working

So I am trying to animate my navigation links background which is Css sprite. this picture: http://img689.imageshack.us/img689/2996/menufc.png $(document).ready(function(){

Solution 1:

For Background image position animation you need to use "jquery.backgroundpos.js" You can download it from here http://keith-wood.name/js/jquery.backgroundpos.js

and the following code is working fine like this

CSS

body{
    background-color:#ccc;  
}
nava{
    background-image:url(http://img689.imageshack.us/img689/2996/menufc.png);
    display:block;
    width:120px;
    height:22px;
    margin-bottom:10px;
}
#m_portf{
background-position:0 -37px;
}
#m_music{
background-position:0 -111px;
}
#m_about{
background-position:0 -185px;
}
#m_contact{
background-position:0 -259px;
}

JQuery

$(document).ready(function(){
$('nav a').hover(
function () {
    $(this).addClass('active');
    $(this).stop().animate({backgroundPosition: '0px ' +$(this).attr('data-one')+'px'}, 500);
},
function () {
    $(this).removeClass('active');
    $(this).stop().animate({backgroundPosition: '0px ' +$(this).attr('data-two')+'px'}, 500);
}
);
});

Html

<headerid="menu"><h1>dawe's portfolio</h1><nav><aid="m_portf"data-one="0"data-two="-37"href="#portfolio">portfolio</a><aid="m_music"data-one="-72"data-two="-111"href="#music">music</a><aid="m_about"data-one="-148"data-two="-185"href="#about">about</a><aid="m_contact"data-one="-222"data-two="-259"href="#contact">contact</a></nav></header>

Here is the working file Link