background-image animation not working in Firefox

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

Answer 2

It doesn't look like firefox supports backgroundPositionY property so you need to use the backgroundPosition property which expects both coordinates.

"backgroundPositionY" in document.createElement("div").style
//true for chrome, false for firefox


"backgroundPosition" in document.createElement("div").style
//true for both

Since jQuery won't support that out of the box, you need to use hook plugin like this

Answer 3

I'm showing a syntax error in slider.js on line 46. Maybe something wasn't closed properly?