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

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

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

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

谢谢,

缺口

===============>>#1 票数:1 已采纳

background-position-xbackground-position-y不是标准。

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

看这些站点:

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

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

===============>>#2 票数:0

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将不支持开箱即用,你需要使用挂钩插件像这样

===============>>#3 票数:0

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

  ask by Nick translate from so

未解决问题?本站智能推荐:

2回复

jquery简单的动画/旋转css背景图像在div内?

我想知道是否有人可以帮助我,或指出我正确的方向。 我正在寻找一个jquery片段,它会自动改变一个div的背景图像,每说5秒左右。 我的初始bg图像是在css中设置的,但我不确定如何创建函数使其在图像数组之间交换? 我有5张图片: bg-1.jpg,bg-2.jpg,bg-3.j
1回复

更改背景图像位置时避免看到“滚动效果”的技术

我正在使用精灵作为背景图像来显示不同的按钮状态。 当我更改位置时,我看到它滚动,因此看到它在到达适当位置之前经历了多个“状态”。 任何有关如何避免这种情况的建议将不胜感激。
2回复

jQuery旋转(按度数旋转)背景图像

我需要的: 背景图像的动画旋转(旋转)任意度数。 理想情况下,动画在另一个动画的回调中被激活。 是)我有的: 带有背景图像的容器div,其中包含其他div(只需要旋转图像而不是div或div内容)。 术语混淆: 在jQuery中,“旋转”一词似乎意味着循环交换 。
1回复

如何在jQuery中设置背景属性的动画?

我通过背景属性使用CSS精灵,并且无法在jQuery中对其进行动画处理。 有没有一种方法或等效的方法来实现这一目标? 我正在设置url属性和位置的动画。
1回复

使用蒙版使jQuery动画化垂直背景精灵的位置?

我如何制作一个jQuery背景垂直动画来掩盖过渡效果,以使精灵的外观淡入下一个位置? 我当前的代码(请参见下面的jsfiddle链接以获取演示)将精灵动画设置为正确的背景位置,但是当这样做时,您可以看到精灵从上到下移动,然后又回到顶部。 我希望过渡平滑/褪色,以便当您将其悬停时,它会在过
3回复

具有无限循环和精灵的图像幻灯片

我正在尝试制作一张带有背景图像的小幻灯片(一个精灵)。 我移动了它的位置,以便在专门为其设计的容器中仅能看见部分内容。 我正在使用javascript / jQuery移动位置107px(一张图片的宽度),但是如果使用无限循环,我的脚本就会崩溃。 这是我尝试运行的内容: 基
1回复

将变量传递给JQuery动画

我是一个jquery初学者,我正在尝试使用动画精灵制作类似于幻灯片的东西。 我一直试图使这段代码工作几个小时,但我不确定问题出在哪里! 我检查了HTML和CSS,看起来很好。 我认为问题在于将值传递给animate方法或者为pospx变量添加字符串。 有任何想法吗?
1回复

悬停链接时更改div的背景位置,并通过mouseout,jQuery保持位置

我进行了很多搜索以获取帮助来回答以下问题: 将鼠标悬停在链接上时,我想用jQuery更改div的图像背景位置。 在mouseOut上,应保留当前位置。 用例: http : //jsfiddle.net/c9wN9/1/ 我有一个带有四个不同“状态”的精灵图像。 在页面加载
2回复

使用延迟在中间暂停jquery动画。 有一些问题

我正在使用背景位置库来设置背景动画。 我想将背景幻灯片放到一半。 在中间暂停一下,然后继续前进。 不幸的是,当我以这种方式编写代码时,动画会移动一半。 在中间暂停,然后从头开始而不是从头开始重新播放动画。 有人知道为什么吗?
2回复

jQuery动画在Firefox中不起作用

我正在为我的投资组合建立一个网站,但是我的动画在FireFox中不起作用。 我已经遍历了CSS和脚本,找不到任何可能引起问题的错误。 我的代码可在除FireFox之外的所有其他浏览器上使用。 该动画旨在将叠加层td沿对角线移出,但是在FireFox中,它们只是坐在那里然后淡出。 以下是我