Y 轴上的 JQuery 动画背景图像

我似乎遇到了 JQuery 动画的问题。我可以在正方向上对背景图像进行动画处理，但不能在负方向上进行动画处理。关于如何解决这个问题有什么建议吗？

$(this).parent().css('background-position-y', '19px');
$(this).parent().animate({ 'background-position-y': '-=19px' }, 1000, 'linear');

通过单独定位背景background-position-x/y是 Internet Explorer 引入的一项功能，但从未将其纳入 W3C 规范。任何将其添加到规范中的建议都已被拒绝。

See: http://snook.ca/archives/html_and_css/background-position-x-y http://snook.ca/archives/html_and_css/background-position-x-y

您始终可以创建自己的小插件，这并不难。

使用 jQuery 1.8，我们现在可以访问 $.Animation 方法，它可以直接为我们提供动画值，而无需做太多工作，因此我们可以执行以下操作：

$.fn.animateBG = function(x, y, speed) {
    var pos = this.css('background-position').split(' ');
    this.x = pos[0] || 0,
    this.y = pos[1] || 0;
    $.Animation( this, {
        x: x,
        y: y
      }, { 
        duration: speed
      }).progress(function(e) {
          this.css('background-position', e.tweens[0].now+'px '+e.tweens[1].now+'px');
    });
    return this;
}

然后使用它我们可以这样做：

$("#background").animateBG(x-value, y-value, speed);​

FIDDLE http://jsfiddle.net/HN3Ba/2/

这是我精心策划的事情另一个答案 https://stackoverflow.com/questions/12160846/jquery-background-position-doesnt-work-in-firefox/12161533#12161533几天前，仅适用于像素，并且确实有一些限制，但它很简单，应该适用于大多数情况。

我想这样的事情会做你想要的：

$(this).parent()
       .css('background-position', '0 19px');
       .animateBG(0, 0, 1000);​