JQuery Animate 背景位置跨浏览器
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15220251/
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
JQuery Animate Background position Cross browsers
提问by ImadBakir
it seems am not able to get this to work:
似乎无法使其正常工作：
$("#animation").animate({backgroundPosition:"-100px 10px"});
I tried this it works, But not on FFox:
我试过这个它有效，但不是在 FFox 上：
$('#animation').animate({
'background-position-x': '10%',
'background-position-y': '20%'
}, 10000, 'linear');
div:
分区：
<div id="animation" style="border: 0px solid rgb(153, 153, 153); margin: auto; width:550%;height: 100%;background-size:100% 100%; overflow:hidden; padding: 0px; background-image: url(images/pano.png); background-attachment: scroll; box-shadow: rgb(0, 0, 0) 0px 0px 40px inset; background-position: 180px 0px; background-repeat: no-repeat;display: none;"></div>
JsFiddle: http://jsfiddle.net/sorfect/34psJ/1/I'm using JQuery 1.8. Any Ideas?
JsFiddle：http: //jsfiddle.net/sorfect/34psJ/1/我使用的是 JQuery 1.8。有任何想法吗？
回答by Raad
Ok, so if you just want to animate the xposition, you're lucky as animating yfor background-positiondoes not work in jQuery. So for xuse:
好了，如果你只是想进行动画处理的x位置，你是幸运的动画y为background-positionjQuery中不起作用。所以x使用：
'background-position': '10%'
but if you want to increment the position in order to animate a series of frames, you need to increment thus:
但是如果你想增加位置以便为一系列帧设置动画，你需要这样增加：
'background-position': '+=10%'
See my jsFiddlefor a working example with stop/go controls.
有关停止/运行控件的工作示例，请参阅我的jsFiddle。
回答by Faizul Hasan
I think this would help youand this toofor why it is not working in Firefox. I was working around with your code. Following code block is behaving in the same way of your code.
我认为这对你和这也有帮助，因为它在 Firefox 中不起作用。我正在处理你的代码。以下代码块的行为方式与您的代码相同。
This behaving same way
这种行为方式相同
$(document).ready(function() {
$('#animation').animate({'background-position': '10%'}, 10000, 'linear');
});
To
到
$('#animation').animate({
'background-position-x': '10%',
'background-position-y': '20%'
}, 10000, 'linear');
And this code block is working in Firefox too.
这个代码块也适用于 Firefox。
$(document).ready(function() {
$('#animation').animate({'background-position': '10%'}, 10000, 'linear');
});
For further reference just check the above given links. Those will help you.
如需进一步参考，请查看上面给出的链接。这些会帮助你。
回答by Saurabh Kumar
you can use this code to animate background position along both x and y direction and it is less cpu expensive
您可以使用此代码沿 x 和 y 方向为背景位置设置动画，并且 CPU 成本较低
var x=0;
window.setInterval(function(){
$('#animation').css('background-position',x+'px '+x+'px');
x=(x-4)%1100;//1100 is width of background image in px
},70);
回答by Ric
Why not try Keith Wood's jQuery Background Position Animation plugin? I ended up using it some years ago when I came to a project late and needed a solution for background animating and didn't have the time to investigate why my code was failing cross browser (quick and dirty - hey, there was a deadline looming large!) and I'll be honest it's one of the few plugins I keep on coming back to.
为什么不试试 Keith Wood 的jQuery 背景位置动画插件？几年前我最终使用了它，因为我迟到了一个项目，需要一个背景动画的解决方案，但没有时间调查为什么我的代码跨浏览器失败（又快又脏——嘿，最后期限迫在眉睫大！）老实说，它是我一直回来使用的少数插件之一。
There are examples on the linked page, so I won't bother repeating them, but hats off to Mr Wood as his plugin has never failed me.
链接页面上有示例，所以我不会重复它们，但向伍德先生致敬，因为他的插件从未让我失望。
