Question

I am using the following script to animate a sprite for the background-image for a nav div:

$("li#test2").hover(
      function () {
        $(this).animate({
          'background-position-y': '-40'
        }, 500);
      },
      function () {
        $(this).animate({
          'background-position-y': '0'
        }, 500);
      }
    );

This works fine in Safari and Chrome, but not in Firefox. You can see the page it is on here. Just hover over the first ‘home’ image in the nav bar.

Could someone let me know why it’s not working in Firefox?

Thanks,

Nick

Answer 1

background-position-x and background-position-y are not standards.

If you want to animate, you must modify both values (x and y) with background-position.

look at these sites:

http://snook.ca/archives/html_and_css/background-position-x-y

https://developer.mozilla.org/en/CSS/background-position