8

我试图只为背景图像的 y 位置设置动画。

代码在除 Firefox 之外的所有浏览器中运行良好。我在之前的讨论中注意到 FF 存在问题，background-position-y但我不想仅针对这种特殊情况包含一个插件。

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

正如在这个问题中所回答的那样：仍然遇到 jQuery 背景动画问题 - 在 safari 和 IE 中工作，仅此而已！我应该可以使用普通background-position属性，但这样做只会破坏其他浏览器中的动画。

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

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

4

8 回答 8

17

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，但想法是一样的。

小提琴

编辑：

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

Y 轴上的 JQuery 动画背景图像

于 2012-05-04T13:14:58.677 回答
3

firefox 不理解 jquery animate 的背景位置，但 firefox 接受 css3 animate。

代码：

  if ($.browser.mozilla) {      
     $('.tag').css({
               'background-position': 'center 0px',
               '-moz-transition': 'all 1500ms ease'
     })
  } else {
     $('.tag').animate({
               'background-position-y': 0
     }, 1500);
  }
于 2013-03-15T22:21:33.527 回答
2

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

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

此外，无论您将什么背景位置值放入 css，jquery 动画似乎总是从“0 50%”开始。嗯……

于 2012-05-04T13:33:48.087 回答
1

使用步骤参数：

  $("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

于 2012-05-04T13:23:21.180 回答
0 
$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)});
于 2013-05-16T05:46:29.333 回答
0 
var x = 0; var y = 0;
window.setInterval(function() {
    $(".layer").css("background-position", x + "px " + y + "px");
    x++; y--;
}, 50);
于 2015-08-04T19:53:16.897 回答
-1

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

于 2012-05-04T13:19:38.427 回答
-1

在 jQuery 中，您可以制作动画background-position-x或y像这样：

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

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

于 2012-05-04T14:15:43.220 回答