Question

我正在尝试仅为背景图像的y位置设置动画。

除了Firefox之外，

代码在所有浏览器中都很有用。在之前的讨论中我注意到FF在background-position-y方面存在问题，但我不想仅针对这种特殊情况包含插件。

$(".module").animate({
    "height": 160,
    "background-position-y": cropsize //variable for needed position
}, "slow");

在这个问题中回答：Still having problems with jQuery background animate - works in safari and IE, nothing else!我应该可以使用普通的background-position属性，但这样做只会破坏其他浏览器中的动画。

$(".module").animate({
    "height": 160,
    "background-position": "0 "+cropsize+"px"
}, "slow");

也许这只是一个我遗漏的语法错误，但我似乎无法在FF中使用它（最新版本）

Answer 1

background-position-x/y并不是任何CSS规范的一部分，它的IE特定CSS，添加到IE5.5，后来由Webkit实现。

Opera和Firefox不接受它。

最佳解决方案是使用step方法，让您可以动画几乎所有内容。

为了给Luka的答案添加一点，即使方法是正确的，这有点不对，使用step方法的最简单方法是设置一些任意值的动画，并勾选一个步骤，类似于：

$('elem').animate({
  'border-spacing': -1000
},
{
  step: function(now, fx) {
    $(fx.elem).css("background-position", "0px "+now+"px");
  },
  duration: 5000
});

该元素必须包装jQuery样式以接受jQuery方法，如css()。我使用过border-spacing，但任何不会影响您网站的css属性都可以使用，只需记住在CSS中为所使用的css属性设置初始值。

step方法也可以单独使用，如果设置fx.start和fx.end值，就像Luka使用now+=1一样，几乎等于使用setInterval而不是，但这个想法听起来都是一样的。

FIDDLE

修改

对于更新版本的jQuery，还有其他选项，请参阅以下答案：

JQuery Animate Background Image on Y-axis

Answer 2

firefox不了解jquery动画的背景位置，但firefox接受css3动画。

代码：

  if ($.browser.mozilla) {      
     $('.tag').css({
               'background-position': 'center 0px',
               '-moz-transition': 'all 1500ms ease'
     })
  } else {
     $('.tag').animate({
               'background-position-y': 0
     }, 1500);
  }

Answer 3

看起来jquery的animate只会占用一个背景属性，而不是两者。您可以使用百分比或像素，两者都可以。但据我所知，没有办法只指定x或y坐标。希望有人可以证明我错了，但这就是这个小提琴似乎表现出来的：

http://jsfiddle.net/JMC_Creative/dPjSz/

此外，无论您将哪些背景位置值放入css，jquery动画似乎总是从“0 50％”开始。嗯...

Answer 4

使用步骤参数：

  $("item").animate({
           opacity:1,
       }, 
      step: function(now, fx){ 
          $(fx.elem).css("background-position","0px "+now+"px");
          now+=1;
      }
});

来自jQuery文档：http://api.jquery.com/animate/#step

Answer 5

$initElement.addClass(initClass).animate(
            {height:[0, 'easeInCirc'], top:  ['+=' + initHeight, 'easeInCirc'] , borderSpacing:[initHeight,'easeInCirc']}, 
            {step: function(now, fx) {
                $initElement.css({"background-position" : "0px -"+now+"px"}
                )},
            },
            {duration: time4design, queue:false},
            function(){ $initElement.removeClass(initClass)});

Answer 6

var x = 0; var y = 0;
window.setInterval(function() {
    $(".layer").css("background-position", x + "px " + y + "px");
    x++; y--;
}, 50);

这很简单:-)来源于http://makeasite.ru/blog/animate-background-position-firefox.html

的示例

Answer 7

background-position动画仅适用于jQuery 1.5.2或更低版本

Answer 8

在jQuery中，您可以像这样设置background-position-x或y：

$(selector).animate({ 
                       backgroundPositionY: amountToAnimate 
                    }, duration);

这个想法是在javascript中-字符是字符串之外的保留运算符。 jQuery使用camelcase来解决这个问题。

使用Jquery在Firefox中为背景位置设置动画

8 个答案: