1

我想做一个模拟两名运动员互相比赛。我有他们的三个分段时间和两个过渡时间。

所以，比赛将是：分段 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 (box1) 在所有分段中的速度都比它工作得快。但在上面的例子中，运动员 2 应该在第一个分段中更快，在第二个分段中更慢。但这不起作用。

HTML 代码：

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

你能帮我么？

可以在此处找到德语示例：http ://www.trinews.at/trimag/index.asp?f=head2head&VID=703&athlet1=117252&athlet2=117256

谢谢

4

2 回答 2

1

检查这个小提琴： http:
//jsfiddle.net/ML3h6/
不是你需要的吗？

或者这里是您可以在几秒钟内通过时间来运行的示例：http race():
//jsfiddle.net/nUBqk/

于 2012-08-17T11:33:15.627 回答
1

从@LLAlive 所做的，我已经开始并试图让它作为你的例子。

这是我到目前为止想出的

http://jsfiddle.net/ML3h6/6/

它将输入拆分为 3 个拆分，并在将输入转换为秒后根据输入进行动画处理。然后动画将分成3个分割，结果符合预期。

前任：

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

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

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

试一试，让我知道这是否是你想要的。

再次感谢你“ LLAlive ”

* *更新：我已经更改了“Easing”以与您的示例相匹配，现在它作为真正运行的 div 更加自然：）查看：http: //jsfiddle.net/ML3h6/7/

于 2012-08-17T12:00:18.477 回答