使用Jquery在Firefox中激活背景位置y [英] Animate background position y in Firefox with Jquery

问题描述

我正在尝试只对背景图片的y位置进行动画处理。

I'm trying to animate only the y position of a background image.

代码在Firefox以外的所有浏览器中都很出色。我在之前的讨论中注意到FF有一个问题与 background-position-y ，但我不想包括一个插件只是为这种特殊情况。

Code works great in all browsers besides Firefox. I've noticed in prior discussion that FF has a problem with background-position-y but I don't want to include a plugin just for this particular case.

$(".module").animate({
    "height": 160,
    "background-position-y": cropsize //variable for needed position
}, "slow");

如此问题回答：仍然有问题的jQuery背景动画 - 在safari和IE中工作，没有别的！我应该能够使用普通的 background-position 属性，但这样做只是破坏了其他浏览器中的动画。

As answered in this question: Still having problems with jQuery background animate - works in safari and IE, nothing else! I should be able to use the plain background-position property, but doing so has only broken the animation in other browsers.

$(".module").animate({
    "height": 160,
    "background-position": "0 "+cropsize+"px"
}, "slow");

也许这只是一个语法错误，我错过，但我似乎无法得到这个工作in FF（Latest version）

Perhaps it's just a syntax error I'm missing, but I can't seem to get this working in FF (Latest version)

推荐答案

background-position-x / y 不是真正的CSS规范的一部分，它的IE特定的CSS，添加到IE5.5，以后由Webkit实现。

background-position-x/y is not really part of any CSS spec, its IE specific CSS, added to IE5.5, and later implemented by Webkit.

Opera和Firefox不接受。

Opera and Firefox do not accept it.

最好的解决方案是使用 step 方法，这将让你对任何东西进行动画处理。

The best solution is to use the step method, that will let you animate just about anything.

为Luka的回答添加一点，方法是正确的，使用步骤方法的最简单的方法是对一些任意值进行动画处理，并为其添加一个步骤，例如：

To add a little to Luka's answer, which is somewhat wrong even though the method is correct, the easiest way to use the step method is to animate some arbitrary value, and hook a step to it, something like:

$('elem').animate({
  'border-spacing': -1000
},
{
  step: function(now, fx) {
    $(fx.elem).css("background-position", "0px "+now+"px");
  },
  duration: 5000
});

元素必须包装jQuery样式以接受jQuery方法，例如 css（）。
我使用了 border-spacing ，但任何不会影响你的网站的css属性都可以工作，只要记住在你的CSS中设置一个初始值为css属性。

The element will have to be wrapped jQuery style to accept jQuery methods, like css(). I've used border-spacing, but any css property that will not affect your site will work, just remember to set an initial value in your CSS for the css property used.

如果您设置fx.start和fx，还可以单独使用步骤 .end值，使用它像Luka做与现在+ = 1 几乎等于只使用setInterval，但是想法是完全相同的。

The step method can also be used alone, if you set the fx.start and fx.end values, using it like Luka does with now+=1 is pretty much equal to just using a setInterval instead, but the idea was sound all the same.

FIDDLE

编辑：

在新版本的jQuery中还有其他选项，请参阅此答案：

with newer versions of jQuery there are other options as well, see this answer :

JQuery Animate Y轴上的背景图片

这篇关于使用Jquery在Firefox中激活背景位置y的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！