背景图像动画在Firefox中不起作用 [英] background-image animation not working in Firefox

问题描述

我正在使用以下脚本为导航div的背景图像设置精灵动画:

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);
      }
    );

这在Safari和Chrome中工作正常，但在Firefox中工作不正常.您可以在此处上看到它的页面.只需将鼠标悬停在导航栏中的第一个家庭"图像上即可.

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.

有人可以让我知道为什么它不能在Firefox中工作吗?

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

谢谢

尼克

推荐答案

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

如果要设置动画，则必须使用background-position修改两个值(x和y).

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

查看这些站点:

http://snook.ca/archives/html_and_css/background-position-xy

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

这篇关于背景图像动画在Firefox中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！