使用从右到左的背景图像为 div 设置动画答案

【问题标题】：Animating a div with a background image from right to left使用从右到左的背景图像为 div 设置动画
【发布时间】：2012-02-20 18:29:18
【问题描述】：

我有一个 div，它本质上是作为背景图像的掩码，只显示图像的特定部分。

背景图片向右对齐。我正在尝试从右到左为 backgroundPosition 设置动画，但是，动画会自动将背景位置重置为左侧（或非常靠近左侧 - 我不太清楚该位置的来源）。

有什么办法可以克服吗？

示例代码：http://jsfiddle.net/QRkLr/
（请注意，当动画触发时，背景图像未完全对齐到右侧）。

【问题讨论】：

您可以为背景设置一个静态位置，而不必在 div 移动时更改它
@Mikhail 我不太清楚你的意思。我将如何应用它？
@kylex 您能否更深入地解释您希望实现的目标？您是否希望面具向左移动，直到看不见为止？
@Wasbazi：动画开始时背景图片的位置没有一直向右对齐。我需要它向右对齐。
@Wasbazi：这是上一个问题的链接，也许有助于在此处显示意图：stackoverflow.com/questions/9354321/…。（我暂时没有时间回答这个问题。）

【解决方案1】：

蒙版的初始 X 位置必须是数字，而不是“正确”。如果我没记错的话，分配给background-position 的任何数字（百分比或像素）都是从左侧计算的。

所以我的解决方法是：保留css：background-position: top right;，但是在动画之前，从左侧计算所需的初始X位置，然后动画回到0（左侧）：

$("#image").css({backgroundPositionX: -large_left_border})
     .animate({backgroundPositionX: 0}, 1500);

编辑

底线：Firefox 不支持background-position-x，并且.animate() 仅适用于数字css 属性（因此它不适用于background-position，因为它不是单个数字），所以没有标准的jquery实现这一点的方法。

不过，正如@thirtydot 指出的here，有一个插件可以在background-position 上实现动画：http://www.protofunc.com/scripts/jquery/backgroundPosition/

【讨论】：

这不会在 FireFox 中为背景设置动画。
我猜you're right，firefox 不支持 backgroundPositionX。而animate 方法仅适用于数字 CSS 属性。看起来像一个死胡同。