Javascript 如何在jquery中同时设置更多元素的动画

我试图理解如何在jQuery中同时设置更多元素的动画

假设我有这样一个简化的代码：

var $targetElement = $('#target-element');

var offset = $targetElement.offset();
var width = $targetElement.outerWidth();
var height = $targetElement.outerHeight();

var bodyWidth = $('body').width();
var bodyHeight = $('body').height();

$topHelper.animate({
    height: offset.top
});

$rightHelper.animate({
    top: offset.top,
    width: bodyWidth - offset.left - width,
    height: height
});

$bottomHelper.animate({
    height: bodyHeight - offset.top - height
});

$leftHelper.animate({
    top: offset.top,
    width: offset.left,
    height: height
});

其中，

targetElement

是主体中的一个元素，所有这些

辅助对象都是黑色半透明的绝对定位层（主体上的右侧），应该围绕targetElement的边界框


问题是，在动画过程中，我可以看到动画层之间的微小（1px-3px）间隙或重叠。它位于边缘，层应始终相邻。我想这是因为我制作了4个元素的动画，每个元素都有自己的“fx”队列。因此，有4个计时器，“帧刷新”并不是同时用于所有计时器

这是真的还是我完全错了？如何同步更多元素的动画

编辑下面的评论：


嗯，我不明白这里如何使用css动画。我认为它们是声明性的，我需要将它们设置为动态计算的位置
requestAnimationFrame
看起来很有希望，不幸的是我需要支持IE9
我真的很想知道关于jQuery动画的答案。更具体地说，我关于4个计时器的假设正确吗？如果是，是否可以在一个“队列”（即在每个“帧重绘”中重新计算所有4个元素位置）中设置多个元素的动画
使用JavaScript制作动画有一些缺点，例如速度非常慢（因此无法以平滑的60 fps播放），计时也不准确。如果您想了解一些新内容，我建议您学习如何使用CSS制作动画，在某些浏览器中，CSS甚至是硬件加速的。@窄带：您需要了解
requestAnimationFrame
：-）说JavaScript动画不能跟上60fps的速度是完全错误的。jQuery的动画速度不快，但这并不意味着JavaScript动画需要慢：事实上，写得巧妙，它们可以更快（并获得硬件加速）。我强烈建议使用脚本动画，而不是脚本动画。您可以使用检测浏览器支持。通过这种方式，大多数用户将获得流畅的动画效果。谢谢您的评论。请参阅我的最新问题。