jquery - 同步 jQuery 背景和元素动画

标签 jquery css jquery-animate background-position

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

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

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

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

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

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

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

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

最佳答案

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

关于jquery - 同步 jQuery 背景和元素动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12131149/

相关文章:

javascript - Django 制作按钮 Ajax

javascript - 在 Json 对象中搜索元素

css - 谷歌浏览器获取 IE9 特定的媒体查询

css - Bootstrap 删除下拉列表中的向上箭头

javascript - UL 列名调整位置

javascript - 动画 Javascript 显示/隐藏按钮

php - 返回 JSON 格式的所有数据的单个 API 调用会比返回部分的多个 API 调用更快吗?

jquery - 使用 jQuery.load ('url.html' 确定图像插入后何时加载)

javascript - jQuery动画批量图像

svg - 在 SVG 路径中对 SVG 进行动画处理