Question

似乎无法使其发挥作用：

$("#animation").animate({backgroundPosition:"-100px 10px"});

我试过这个有效，但不是在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/ 我正在使用JQuery 1.8。任何想法？

Answer 1

好的，所以如果你只想为x位置设置动画，那么你很幸运，y background-position的动画在jQuery中不起作用。因此，x使用：

'background-position': '10%'

但是如果你想增加位置以动画一系列帧，你需要增加：

'background-position': '+=10%'

请参阅我的jsFiddle了解停止/停止控件的工作示例。

Answer 2

我认为this would help you和this too为什么它不适用于Firefox。我正在处理你的代码。以下代码块的行为方式与代码相同。

这种行为方式相同

$(document).ready(function() {
  $('#animation').animate({'background-position': '10%'}, 10000, 'linear');
});

要

$('#animation').animate({
 'background-position-x': '10%',
  'background-position-y': '20%'
}, 10000, 'linear');

此代码块也在Firefox中运行。

 $(document).ready(function() {
    $('#animation').animate({'background-position': '10%'}, 10000, 'linear');
 });

如需进一步参考，请查看上面给出的链接。那些会帮助你。

Answer 3

您可以使用此代码在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);

Answer 4

为什么不试试Keith Wood的jQuery Background Position Animation plugin？几年前我最终使用它时，我来到一个项目的时候很晚，需要一个背景动画解决方案，没有时间调查为什么我的代码在浏览器中失败（快速和肮脏 - 嘿，有一个截止日期迫在眉睫很大！）我会说实话，这是我不断回来的为数不多的插件之一。

链接页面上有一些例子，所以我不打算重复它们，但对Wood先生说，因为他的插件从未让我失望。

JQuery Animate背景位置跨浏览器

4 个答案: