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

Posted 2023-03-06

【中文标题】使用 Jquery 在 Firefox 中为背景位置 y 设置动画

【英文标题】：Animate background position y in Firefox with Jquery

【发布时间】：2012-05-14 00:52:05

【问题描述】：

我正在尝试仅对背景图像的 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（最新版本）中使用它

【参考方案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

【讨论】：

@JMCCreative - 实际上，你错了！在旧版本的 jQuery 中。在 1.4.something 之前，您可以在背景动画中传递两个值并使其工作，至少在某种程度上。较新版本的 jQuery 不允许这样做。要在背景位置设置某些值，必须将背景附件设置为固定，但你说得对，这里不应该成为问题。我也可以让背景在 Firefox 中只用常规动画移动，但只能在 X 方向移动，在 Y 方向移动它似乎需要使用 step 方法，所以 Luka 有迄今为止最好的答案。

好吧，我想你是对的。关于这个：jsfiddle.net/JMC_Creative/nAXdd 我已将 jquery 的版本设置为 1.4，它 确实 接受这两个值。两者都只对 X 进行动画处理，而只是跳转到 Y 坐标。

是的，发生了一些奇怪的事情。

太棒了，这看起来会做到的。一旦我得到实施，就会将其标记为已回答。感谢你们俩解决这个问题。

那个任意值才是真正的关键。多么随意。再次感谢。

【参考方案2】：

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);
  

【参考方案3】：

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

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

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

【讨论】：

是的，你偶然发现了我一直在寻找的同样奇怪的东西。只有当我不关心 firefox 时，我才能为 background-position-y 设置动画，但是当我包含 x 值时，它会忽略 y 值。彻底迷惑了。

仅供参考，background-position-y 不是 真正的 css 规则，它只是 IE 特定的小玩意儿。

但是Webkit支持它，所以你是对的，但它应该被支持，因为它很棒，哈哈

【参考方案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

【讨论】：

打算试一试。等我有空会回来报告。

它似乎没有工作：jsfiddle.net/JMC_Creative/nAXdd/2 ...也许我实施错了。

【参考方案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));

【参考方案6】：

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

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。您可以在帮助中心找到更多关于如何写好答案的信息：***.com/help/how-to-answer。祝你好运?

【参考方案7】：

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

【讨论】：

我在jsfiddle.net/69hZY/4 和jsfiddle.net/69hZY/45 上遇到了问题第二个是使用jquery 1.7.2

【参考方案8】：

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

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

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

【讨论】：

首先，您可以在对象键中使用 -。 var x = "一些东西": "weee"; x["some-stuff"] // weee 其次，整个问题之所以存在，是因为按照您的回答建议去做是行不通的。