javascript - JQuery Animate 背景位置跨浏览器

Question

似乎我无法让它工作:

$("#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。有什么想法吗？

Answer 1

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

'background-position': '10%'

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

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

查看我的 jsFiddle有关停止/继续控制的工作示例。