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

Question

我试图了解如何在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是身体中的一个元素，而所有helpers都是黑色半透明绝对定位的层（身体右侧），它们应该覆盖 targetElement＆＃39; s 边界框。

问题是在动画期间我可以看到动画层之间的微小（1px - 3px）间隙或重叠。它的边缘应该始终彼此相邻。我认为这是因为我为4个元素制作动画，每个元素都有自己的＆＃f;＆＃39; fx＆＃39;队列。因此，有4个定时器和“帧”刷新＆＃39;并非所有人都在同一时间。

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

编辑来自以下评论：

• 好吧，我不明白如何在这里使用css动画。我认为它们是声明性的，我需要动画到动态计算的位置。
• requestAnimationFrame看起来很有希望，不幸的是我需要支持IE9。
• 我真的很感激有关jQuery动画的答案。更具体地说，我对4个计时器的假设是对的吗？如果是，是否可以在一个队列中设置更多元素的动画＆＃39; - 这是重新计算每个框架重绘的所有4个元素位置＆＃39;一起？