用背景图像从右至左动画一个div

我有一个div，它基本上只是透过图像的特定部分作为其背景图像的遮罩。用背景图像从右至左动画一个div

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

有什么办法可以解决这个问题吗？

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

来源

2012-02-20 kylex

你可以为背景的静态位置，并没有改变它时，DIV移动 – Mikhail 2012-02-20 18:34:30

@Mikhail我不太清楚你的意思。我将如何应用？ – kylex 2012-02-20 18:38:12

@kylex你能深入解释一下你希望达到的目标吗？你是否希望让面具向左走，直到它不再被看到？ – Wasbazi 2012-02-20 18:43:29

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

所以我的修补程序：保持CSS：background-position: top right;，但随后的动画之前，计算从左边所需的初始x位置，然后动画回到0（左）：

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

见fiddle

编辑

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

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

来源

2012-02-20 19:10:34 ori

这不会在FireFox中为背景设置动画。 – kylex 2012-02-20 20:25:54

我想[你是对的]（http://snook.ca/archives/html_and_css/background-position-x-y），firefox不支持backgroundPositionX。 'animate'方法只适用于数字CSS属性。看起来像死胡同。 – ori 2012-02-20 21:20:03

用背景图像从右至左动画一个div

回答

相关问题