jQuery背景位置动画与css sprites不工作

所以我试图动画我的导航链接背景是Css sprite。
此图片： http://img689.imageshack.us/img689/2996/ menufc.png

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(){
      $('nav a')

   // On mouse over, move the background on hover

   .mouseover(function(){
 $(this).stop().animate({backgroundPosition: '0px ' +$(this).attr('data-one')+'px';}, 500);
   })

// On mouse out, move the background back

   .mouseout(function(){
  $(this).stop().animate({backgroundPosition: '0px ' +$(this).attr('data-two')+'px';}, 500);
   })
 });

这是jQuery应该做的工作。
此处还有HTML：

This is th jQuery which should do the job. Also here I have the HTML:

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

我不知道问题是什么。我试图以这么多其他方式做到。我认为这一个是最接近真正的解决方案，我把两种类型的代码放在一起，我发现。
我想知道是否的问题是，我没有定义背景位置为绝对，相对等（是甚至可能吗？）至于我关注的jquery动画需要定义iamge的位置。或者在我的代码可能有任何其他错误。我不知道请帮帮我。这里是我的css太：

I don' know what the problem is. I have tried to do it in so many other ways. I think this one is the closest to the real solution, I put two types of codes together which I found. I was wondering whether the problem might be that I didn't define backgrounds position as absolute, relative, etc. (is it even possible?) As far as I am concerned for jquery animation requires the definition of iamge's position. Or there might be any other errors in my code. I don't know please help me. Here is my css too:

#m_portf{
background: #fff url('menu.png')repeat-X 0px -37px;
}
#m_music{
background: #fff url('menu.png')repeat-X 0px -111px;
}
#m_about{
background: #fff url('menu.png')repeat-X 0px -185px;
}
#m_contact{
background: #fff url('menu.png')repeat-X 0px -259px;
}