why isnt this jquery working properly?

Question

In this site's navigation: [link removed]

I am attempting to use Jonathan Snook's jQuery background image animation http://snook.ca/archives/javascript/jquery-bg-image-animations/

The code used:

HTML

<div class="navigation">
      <ul class="navigation">
       <li class="about-us"><a href="#">about us</a></li>                
       <li class="services"><a href="#">services</a></li>
       <li class="products"><a href="#">products</a></li>
       <li class="news"><a href="#">news</a></li>
       <li class="contact"><a href="#">contact</a></li>
      </ul>
     </div><!--/navigation-->

CSS:

div.navigation {
    display: block;
    height: 47px;
}

ul.navigation li { 
    float: left; 
    display: block;
    text-indent: -9999px;
    background: url(../i/menu-sprite.jpg) no-repeat;
}

ul.navigation li a { display: block; height: 47px;}

ul.navigation li.about-us { width: 197px; background-position: 0 0; }
ul.navigation li.about-us:hover { width: 197px; background-position: 0 -47px; }

ul.navigation li.services { width: 200px; background-position: -197px 0; }
ul.navigation li.services:hover { width: 200px; background-position: -197px -47px; }

ul.navigation li.products { width: 210px; background-position: -396px 0; }
ul.navigation li.products:hover { width: 210px; background-position: -396px -47px; }

ul.navigation li.news { width: 152px; background-position: -606px 0; }
ul.navigation li.news:hover { width: 152px; background-position: -606px -47px; }

ul.navigation li.contact { width: 183px; background-position: -758px 0; }
ul.navigation li.contact:hover { width: 183px; background-position: -758px -47px; }

jQuery:

$(function(){
$('ul.navigation li a')
    .css( {backgroundPosition: "0 0"} )
    .mouseover(function(){
     $(this).stop().animate(
      {backgroundPosition:"(0 -47px)"}, 
      {duration:500})
     })
    .mouseout(function(){
     $(this).stop().animate(
      {backgroundPosition:"(0 0)"}, 
      {duration:500})
     })
});

Any comments would be greatly appreciated.

Answer 1

I don't see a background-image applied to your ul.navigation li a. Yet, you are attempting to set and animate the background-position style.

Answer 2

I don't know what is not working but I am assuming your jquery is not animating the background position it is because you have already given a hover state in your css which overrides the animation and instantly moves your background position...
Another thing in your javascript try using since you have background position for .about-us and not .about-us a

$('ul.navigation li.about-us').stop().animate(
                {backgroundPosition:"(0 -47px)"}, 
                {duration:500})

but in your jquery code you are again reseting the background position on hover too '0 0'... so I would advice you to remove the css:hover state

Answer 3

You must replace selector:

$(this).stop().animate(

with:

$(this).parent('li').animate(

because with stop() you select a tag, and you need to select li tag.

Answer 4

One thing that is often overlooked with background animations in jquery is they need an additional plugin (it's a small one though), to make it work. The plugin can be found at http://plugins.jquery.com/project/backgroundPosition-Effect.