Jquery 以不同的持续时间设置两个div的动画

我想做一个两名运动员相互比赛的模拟。我有三次分裂和两次过渡

因此，比赛将是：分裂1，过渡1，分裂2，过渡2，分裂3

我试着这样模拟：

$(window).load(function(){
jQuery("#box1").animate({ width: "100%" }, {duration: 100}).animate({ width: "100%" }, 10>).animate({ width: "100%" }, 1000%>).animate({ width: "100%" }, 100%>).animate({ width: "100%" }, 50);
jQuery("#box2").animate({ width: "100%" }, {duration: 50}).animate({ width: "100%" }, 10).animate({ width: "100%" }, 2000).animate({ width: "100%" }, 100).animate({ width: "100%" }, 500);
});

如果Athlet 1（框1）在所有拆分中的速度都快于它的工作速度。但是在上面的例子中，Athlet 2在第一次分割时应该更快，在第二次分割时应该更慢。但这是行不通的

HTML代码：

<div id="box1">Athlet 1</div>
<div id="box2">Athlet 2</div>

Athlet 1
Athlet 2

你能帮帮我吗

德语的一个例子可以在这里找到：

谢谢检查这把小提琴：

不是你需要的吗

或者这里是一个示例，您可以将时间以秒为单位传递给函数

race（）

：

---

根据@LLAlive所做的，我已经开始并试图让它成为您的榜样

这是我到目前为止的想法

它将输入拆分为3个拆分，并在将它们转换为秒后根据条目执行动画。 然后动画将拆分为3个拆分，结果与预期一致

例：

玩家1:5秒==>6秒==>7秒=18秒

玩家2:8秒==>5秒==>5秒=18秒

如果您尝试这些数字，您会发现它们按预期工作，并且两者将在相同的总时间内完成，但会根据当前拆分而有所不同

试试看，如果这是你想要的，请告诉我

再次感谢您“LLAlive”

**更新：我更改了“放松”以与您的示例相匹配，现在作为真正的跑步div更自然：）

---

查看：

plz在这里添加你的html。在我上面的帖子中添加了html。不真实：在这里看到相同的问题：我认为，两者应该同时完成？；-）