CODEWITHSUNDEEP
jquery
El Stefano
El Stefano

Reputation: 17

Animate two divs with different duration

i want to do a simulation of two athletes doing a race against each other. I have their three split times and two transition times.

So, the race will be: split 1, transition 1, split 2, transition 2, split 3

I tried do simulate it this way:

$(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);
});

If Athlet 1 (box1) is in all splits faster, than it is working. But in the example above, Athlet 2 should be faster in the first split and slower in the second one. But this is not working.

HTML Code:

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

Can you please help me?

An example in german can be found here: http://www.trinews.at/trimag/index.asp?f=head2head&VID=703&athlet1=117252&athlet2=117256

Thanks

Upvotes: 1

Views: 178

Answers (2)

Mohammed Swillam
Mohammed Swillam

Reputation: 9242

From what @LLAlive has made, I've started and tried to make it to work as your example.

here is what I've came up with so far

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

it splits the inputs into the 3 splits, and will do the animation according to the entries after converting them into seconds. then the animation will split into the 3 splits, the result is as expected.

Ex:

Player 1: 5 seconds==> 6 seconds ==> 7 seconds = 18 seconds

Player 2: 8 seconds==> 5 seconds ==> 5 seconds = 18 seconds

if you tried these numbers, you will find them working as expected, and both will finish at the same total time, but will vary depending on the current split.

give it a try and let me know if this is what you want.

again, thanks to you "LLAlive"

**Update: I've changed the "Easing" to match with your example, it's now more natural as real running divs :) check it out: http://jsfiddle.net/ML3h6/7/

Upvotes: 1

LLAlive
LLAlive

Reputation: 427

Check this fiddle:
http://jsfiddle.net/ML3h6/
Not what you need?

Or here is example where you can pass time in seconds to function race():
http://jsfiddle.net/nUBqk/

Upvotes: 1

Related Questions