3

我在下面的小提琴中说明了我的问题;http://jsfiddle.net/6CTMs/

的背景wrapper是​​一个中间有一个白洞的图像。然后这个孔被block元件覆盖。

现在我想为背景和向上移动的块设置动画。我同时动画背景位置(通过包含的背景位置动画插件)和元素的top属性。block

但是,至少在我的 Win7 上的 Chrome 21.0.1180.79 上,这两个动画并不完全同步。似乎每隔一帧动画,底部都会显示一条白色条带(显示下面的一个像素高的孔切片),而每隔一帧则没有。

我怎样才能避免这种情况?

在子元素中包含背景图像并仅为其顶部属性设置动画在我的情况下不是一个选项。我也不能让元素高一个像素或任何类似的“黑客” - 尺寸和动画需要精确。

作为旁注,我认为这个问题可能与我早期的问题有关,该问题从未完全解决。

编辑:我在这里分叉了小提琴;http://jsfiddle.net/3r26H/1/似乎有效,但看起来它在动画结束时留下了一个像素。我也不知道这是否会在非 Webkit 浏览器中产生新问题。这个解决方案有多洁净?

4

1 回答 1

3

根据这个线程:JQuery 同步动画不可能在 JQuery 中同步两个动画。您可以做的是“手动”为整个事物设置动画,requestAnimationFrame在每一帧使用并进行正确的计算,以便两个元素同步。

于 2012-08-26T16:39:04.233 回答