jQuery背景位置動畫與CSS sprite不工作

Question

所以我想要動畫我的導航鏈接背景是Css精靈。 這樣的畫面：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：

 <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太：

#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; 
} 

Answer 1

背景圖像位置的動畫，你需要使用「jquery.backgroundpos.js」 你可以從這裏http://keith-wood.name/js/jquery.backgroundpos.js

下載它和下面的代碼是工作的罰款這樣

CSS

body{ 
    background-color:#ccc; 
} 
nav a{ 
    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

<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> 

這裏是工作文件Link