如何在一个渲染循环中放置多个动画？

Question

如何在一个渲染循环中放置多个动画？

使用Jquery，如果有多个元素要设置动画，并且想要：

1. 为每个元素提供自己的离散值（例如每个元素的唯一left）
2. 将所有元素放在单个主计时器和
中
3. 移动步骤应基于集体，而不是集合中的任何个人
4. 每个渲染循环应更新所有位置，而不释放对给定步骤的元素之间的浏览器的控制。 （但它应该在步骤之间释放）

你是怎么做到的？

示例：

让C代表以列显示的div列表，其中absolute定位，唯一的左值等于左边所有列的宽度之和。

CCCCCCCCCCCCCCCCCCCCCCCCC

让^ P代表用户的鼠标，在列表列表中拖动一个元素P：

CCCCCCCCCCCCCCCCCCCCCCCCC
               ^P  

列C应将^P的宽度拆分为^ P的位置以腾出空间。像：

CCCCCCCCCCCCCCC   CCCCCCCCCCC
               ^P

列分割应该是动画的，但mousemove事件不应该允许列动画中断，其中一列移动到下一步但其他列没有。

问题

给定一个对象oPos，其中包含动画完成后每列的正确的新左值：

oPos[Index] = {
   Left:120,
   Right:300,
   Center:75,
   Width:150,
   $Element:$(ACachedSelector),
}

使用animate()方法分配动画：

for(var i in oPos){
   oPos[i].$Element.stop().animate({
      left:oPos[i].Left,         
   },{
      duration: 500,
      queue:false,
   });
}

...无法正常工作，因为每个元素都使用它自己的动画循环进行动画处理并尝试独立移动。这表现糟糕，看起来很糟糕。

所需的效果是让插入点右侧的所有列作为一个单元向右滑动，并作为一个动画的一部分。例如，尝试在Firefox中打开多个选项卡并拖动选项卡以重新排序选项卡。使用动画为您打开了一个空白。

那么，如何使用Jquery在一个渲染循环中放置多个动画？

Answer 1

我有一个支持动画组合的项目，它可能对您有帮助。

https://github.com/emn178/jquery-animations