background-image animation not working in Firefox

问题

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

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

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