title: jQuery background-position animation with css sprites not working
body: <p>So I am trying to animate my navigation links background which is Css sprite. 
  this picture: <a href="http://img689.imageshack.us/img689/2996/menufc.png" rel="nofollow">http://img689.imageshack.us/img689/2996/menufc.png</a></p>
  
  <pre><code>$(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);
     })
   });
  </code></pre>
  
  <p>This is th jQuery which should do the job.
  Also here I have the HTML:</p>
  
  <pre><code>        &lt;header id="menu"&gt;
          &lt;h1&gt;dawe's portfolio&lt;/h1&gt;
          &lt;nav&gt;   
              &lt;a id="m_portf" data-one="0" data-two="-37" href="#portfolio"&gt;portfolio&lt;/a&gt;
              &lt;a id="m_music" data-one="-72" data-two="-111" href="#music"&gt;music&lt;/a&gt;
              &lt;a id="m_about" data-one="-148" data-two="-185" href="#about"&gt;about&lt;/a&gt;
              &lt;a id="m_contact" data-one="-222" data-two="-259" href="#contact"&gt;contact&lt;/a&gt;
          &lt;/nav&gt;
      &lt;/header&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>#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;
  }
  </code></pre>