使用 Jquery 在 Firefox 中动画背景位置 y
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10449474/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Animate background position y in Firefox with Jquery
提问by Gregg B
I'm trying to animate only the y position of a background image.
我试图只为背景图像的 y 位置设置动画。
Code works great in all browsers besides Firefox. I've noticed in prior discussion that FF has a problem with background-position-ybut I don't want to include a plugin just for this particular case.
代码在除 Firefox 之外的所有浏览器中都能很好地工作。我在之前的讨论中注意到 FF 有问题，background-position-y但我不想只为这种特殊情况包含一个插件。
$(".module").animate({
"height": 160,
"background-position-y": cropsize //variable for needed position
}, "slow");
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-positionproperty, but doing so has only broken the animation in other browsers.
正如在这个问题中所回答的：仍然有 jQuery 背景动画的问题 - 在 safari 和 IE 中工作，没有别的！我应该可以使用 plainbackground-position属性，但这样做只会破坏其他浏览器中的动画。
$(".module").animate({
"height": 160,
"background-position": "0 "+cropsize+"px"
}, "slow");
Perhaps it's just a syntax error I'm missing, but I can't seem to get this working in FF (Latest version)
也许这只是我遗漏的语法错误，但我似乎无法在 FF（最新版本）中使用它
回答by adeneo
background-position-x/yis not really part of any CSS spec, its IE specific CSS, added to IE5.5, and later implemented by Webkit.
background-position-x/y并不是任何 CSS 规范的真正组成部分，它的 IE 特定 CSS，添加到 IE5.5，后来由 Webkit 实现。
Opera and Firefox do not accept it.
Opera 和 Firefox 不接受它。
The best solution is to use the stepmethod, that will let you animate just about anything.
最好的解决方案是使用该step方法，它可以让您对几乎任何东西进行动画处理。
To add a little to Luka's answer, which is somewhat wrong even though the method is correct, the easiest way to use the stepmethod is to animate some arbitrary value, and hook a step to it, something like:
为 Luka 的答案添加一点，即使该方法是正确的，这也有些错误，使用该step方法的最简单方法是为某个任意值设置动画，并为其挂钩一个步骤，例如：
$('elem').animate({
'border-spacing': -1000
},
{
step: function(now, fx) {
$(fx.elem).css("background-position", "0px "+now+"px");
},
duration: 5000
});
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.
该元素必须包装 jQuery 样式才能接受 jQuery 方法，例如css(). 我已经使用了border-spacing，但是任何不会影响您网站的 css 属性都可以使用，只需记住在您的 CSS 中为所使用的 css 属性设置一个初始值。
The stepmethod can also be used alone, if you set the fx.start and fx.end values, using it like Luka does with now+=1is pretty much equal to just using a setInterval instead, but the idea was sound all the same.
该step方法也可以单独使用，如果你设置了 fx.start 和 fx.end 值，像 Luka 一样使用它now+=1几乎等同于使用 setInterval 代替，但这个想法听起来都是一样的。
EDIT:
编辑：
with newer versions of jQuery there are other options as well, see this answer :
对于较新版本的 jQuery，还有其他选项，请参阅此答案：
回答by Gustavo S. Rodrigues
The firefox don't understands the background-position with jquery animate, but firefox accepts css3 animate.
firefox 不理解 jquery animate 的背景位置，但 firefox 接受 css3 animate。
Code:
代码：
if ($.browser.mozilla) {
$('.tag').css({
'background-position': 'center 0px',
'-moz-transition': 'all 1500ms ease'
})
} else {
$('.tag').animate({
'background-position-y': 0
}, 1500);
}
回答by JakeParis
It looks like jquery's animate will only take one background property, not both. You can use either percentages or pixels, both are okay. But from what I can tell, there's not a way to specify only x or y coordinates. Hopefully someone can prove me wrong on that, but that's what this fiddle seems to show:
看起来 jquery 的 animate 只会采用一个背景属性，而不是两者。您可以使用百分比或像素，两者都可以。但据我所知，没有办法只指定 x 或 y 坐标。希望有人能证明我错了，但这就是这个小提琴似乎显示的内容：
http://jsfiddle.net/JMC_Creative/dPjSz/
http://jsfiddle.net/JMC_Creative/dPjSz/
Also, no matter what background-position values you put into css, the jquery animation always seems to start from "0 50%". Hmmm...
此外，无论您将什么背景位置值放入 css，jquery 动画似乎总是从“0 50%”开始。嗯...
回答by Luka Ramishvili
use step parameter:
使用步骤参数：
$("item").animate({
opacity:1,
},
step: function(now, fx){
$(fx.elem).css("background-position","0px "+now+"px");
now+=1;
}
});
From the jQuery documentation: http://api.jquery.com/animate/#step
来自 jQuery 文档：http: //api.jquery.com/animate/#step
回答by Amin
$initElement.addClass(initClass).animate(
{height:[0, 'easeInCirc'], top: ['+=' + initHeight, 'easeInCirc'] , borderSpacing:[initHeight,'easeInCirc']},
{step: function(now, fx) {
$initElement.css({"background-position" : "0px -"+now+"px"}
)},
},
{duration: time4design, queue:false},
function(){ $initElement.removeClass(initClass)});
回答by Boyko Alexander
var x = 0; var y = 0;
window.setInterval(function() {
$(".layer").css("background-position", x + "px " + y + "px");
x++; y--;
}, 50);
That was easy :-) Source with example at http://makeasite.ru/blog/animate-background-position-firefox.html
这很简单 :-) 来源示例在http://makeasite.ru/blog/animate-background-position-firefox.html
回答by Codrin Eugeniu
in jQuery you can animate background-position-xor ylike this:
在 jQuery 中，您可以设置动画background-position-x或y像这样：
$(selector).animate({
backgroundPositionY: amountToAnimate
}, duration);
The idea being that in javascript the -character is an reserved operator outside of strings. jQuery uses camelcase to work around this.
这个想法是在 javascript 中，-字符是字符串之外的保留运算符。jQuery 使用驼峰命名来解决这个问题。
回答by Sujith Kumar KS
background-positionanimation is only work with jQuery 1.5.2 or below
background-position动画仅适用于 jQuery 1.5.2 或更低版本
