使用从右到左的背景图像动画div

Question

我有一个div，它只是通过显示图像的特定部分来充当其背景图像的遮罩。

背景图像右侧对齐。我试图从右到左动画backgroundPosition，但是，动画会自动将背景位置重置到左边（或者非常接近左边 - 我无法弄清楚位置来自哪里）。

有没有办法克服这个问题？

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

Answer 1

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

所以我的修复是：保持css：background-position: top right;，但是在动画之前，从左边计算所需的初始X位置，然后将动画回到0（左）：

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

请参阅fiddle

修改

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

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