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

发布于 2024-12-20 19:21:58 字数 526 浏览 4 评论 0原文

我正在使用以下脚本为导航 div 的背景图像制作精灵动画：

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

这在 Safari 和 Chrome 中运行良好，但在 Firefox 中则不然。您可以在此处查看该页面。只需将鼠标悬停在导航栏中的第一个“主页”图像上即可。

有人可以告诉我为什么它在 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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

星軌x 2024-12-27 19:21:58

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

如果您想要制作动画，则必须使用 background-position 修改两个值（x 和 y）。

看看这些网站：

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

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

回复收藏 0 原文

泅渡 2024-12-27 19:21:58

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

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

回复收藏 0 原文