Trying to add animation to my navigation links background using a Css sprite. Check out the picture here:
$(document).ready(function(){
$('nav a')
// Move the background on hover
.mouseover(function(){
$(this).stop().animate({backgroundPosition: '0px ' +$(this).attr('data-one')+'px';}, 500);
})
// Move the background back on mouse out
.mouseout(function(){
$(this).stop().animate({backgroundPosition: '0px ' +$(this).attr('data-two')+'px';}, 500);
})
});
This is the jQuery code that should work. Here is 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>
Tried various ways but can't figure out what the issue might be. Tried combining different codes I found, this seems close to the solution. Wondering if defining background position as absolute or relative is necessary for jQuery animations. Or maybe there are errors in the code. Please help me troubleshoot. Here is my 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;
}