Question

我正在使用以下脚本为nav div的背景图像设置sprite动画：

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

这适用于Safari和Chrome，但不适用于Firefox。您可以在here上看到它所在的页面。只需将鼠标悬停在导航栏中的第一个“主页”图像上即可。

有人可以告诉我为什么它在Firefox中不起作用吗？

谢谢，

尼克

Answer 1

background-position-x和background-position-y不是标准。

如果要进行动画处理，则必须使用background-position修改两个值（x和y）。

看看这些网站：

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

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

Answer 2

它看起来不像firefox支持backgroundPositionY属性，所以你需要使用需要两个坐标的backgroundPosition属性。

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


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

由于jQuery不支持开箱即用，你需要使用像this这样的钩子插件

Answer 3

我在第46行的slider.js中显示语法错误。也许某些内容未正确关闭？

背景图像动画在Firefox中不起作用

3 个答案: