JQuery动画背景位置跨浏览器

JQuery Animate Background position Cross browsers

本文关键字：浏览器 位置 背景 动画 JQuery      更新时间：2023-09-26

我似乎不能让这个工作:

$("#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。什么好主意吗?

好的，所以如果你只是想动画x的位置，你很幸运，因为动画y为background-position在jQuery中不工作。所以对于x使用:

'background-position': '10%'

，但如果你想增加位置，以便动画一系列帧，你需要这样增加:

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

请参阅我的jsFiddle，以获得一个使用stop/go控件的工作示例

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

要进一步参考，请检查上面给出的链接。

你可以使用这个代码来动画背景位置沿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);

为什么不试试Keith Wood的jQuery背景位置动画插件?几年前，当我参加一个项目，需要一个背景动画的解决方案，没有时间调查为什么我的代码跨浏览器失败(快速和肮脏-嘿，有一个迫在眉睫的最后期限!)，我结束了使用它，我将诚实地说，它是少数几个我不断回来的插件之一。

链接页面上有一些例子，所以我就不重复了，但是向Wood先生致敬，因为他的插件从来没有让我失望过。

相关文章：