同步 jQuery 背景和元素动画

Posted 2023-05-08

【中文标题】同步 jQuery 背景和元素动画

【英文标题】：Syncing jQuery background and element animation

【发布时间】：2012-08-21 07:14:28

【问题描述】：

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

wrapper的背景是一张中间有一个白洞的图片。然后这个洞被block 元素覆盖。

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

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

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

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

作为旁注，我认为这个问题可能与an earlier question of mine 有关，它从未完全得到解决。

编辑：我在这里分叉了 Fiddle； http://jsfiddle.net/3r26H/1/ 似乎可以工作，但看起来它在动画结束时会留下一个像素。我也不知道这是否会在非 Webkit 浏览器中产生新问题。这个解决方案有多 kosher？

【问题讨论】：

在 Firefox 14.0.1 上测试时完美同步。

感谢 Abody97！也许这是一个仅限 Webkit 的问题？有趣

【参考方案1】：

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

【讨论】：

我能够使用该逻辑和步骤函数从我链接的问题的答案中制作这个小提琴，它似乎可以在我的 Chrome 上工作，除了动画离开 1 个像素的事实一旦完成； jsfiddle.net/3r26H/1 -- 知道这种效果的跨浏览器可靠性如何？

它似乎对我不起作用：/（Mac OS X Lion - Chrome 和 Firefox）。所以对于你的问题，我会说它不可靠:) 我正在研究另一个小提琴，向你展示我会如何做到这一点（如果我一开始认为的确实是一个很好的解决方案：D）

看起来很酷，也适合我！该解决方案的向后兼容性如何？

另外，设置动画速度对我来说似乎有点神秘； 20000 毫秒是我设定的时间。我如何改变你的解决方案？

如果“向后兼容性”是指这段代码是否可以在旧版浏览器上运行：它应该可以运行，但我还没有测试过：/ 如果你想要一个更好的 polyfill，你应该看看这里requestAnimFrame 函数：paulirish.com/2011/requestanimationframe-for-smart-animating