1

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

Nick
  • 4,304
  • 15
  • 69
  • 108

3 Answers3

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

Gergely Fehérvári
  • 7,811
  • 6
  • 47
  • 74
0

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

Esailija
  • 138,174
  • 23
  • 272
  • 326
0

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

john
  • 1,322
  • 11
  • 22
  • Looking through the code, it looks like the last set of closing brackets is unnecessary. The `});` isn't closing anything. – john Dec 11 '11 at 18:37