5

似乎无法使其正常工作：

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

我试过这个它有效，但不适用于 FFox：

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

分区：

<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。有任何想法吗？

4

4 回答 4

10

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

'background-position': '10%'

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

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

请参阅我的jsFiddle以获取带有停止/开始控件的工作示例。

于 2013-03-05T12:36:37.883 回答
3

我认为这会对你有所帮助，这也是为什么它不能在 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');
 });

如需进一步参考，只需检查上面给出的链接。这些会帮助你。

于 2013-03-05T11:08:29.063 回答
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);
于 2013-10-19T09:26:04.290 回答
1

为什么不试试 Keith Wood 的jQuery 背景位置动画插件？几年前，当我迟到一个项目并需要一个背景动画解决方案并且没有时间调查我的代码跨浏览器失败的原因时，我最终使用了它（又快又脏 - 嘿，最后期限迫在眉睫大！）老实说，它是我不断回归的少数插件之一。

链接页面上有示例，所以我不会费心重复它们，但向 Wood 先生致敬，因为他的插件从未让我失望。

于 2014-03-29T13:01:39.600 回答