CSS 스프라이트가 작동하지 않는 jQuery 배경 위치 애니메이션

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를 일이다.

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

나는 '돈 문제가 무엇인지 알고 또한 여기에 나는 HTML이있다. 나는 다른 많은 방법으로 그것을 시도했다. 이 것이 실제 솔루션에 가장 가깝다고 생각합니다. 두 가지 유형의 코드를 함께 찾아 냈습니다. 내가 절대, 상대 등으로 배경 위치를 정의하지 않았다는 문제가 있는지 궁금해했다. (심지어 가능합니까?) jquery 애니메이션에 관한 한 iamge의 위치가 필요합니다. 또는 내 코드에 다른 오류가있을 수 있습니다. 제발 나를 도와주세요. 여기 내 CSS는 너무 :

당신이 "jquery.backgroundpos.js을" 사용할 필요가 배경 이미지 위치 애니메이션

#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

당신은 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