| <style> |
| div { |
| position: relative; |
| height: 100px; |
| width: 100px; |
| background: blue; |
| } |
| </style> |
| |
| Player started then cancel()/finish(). Neither of the boxes should move. |
| <br> |
| |
| <div id="target1"></div> |
| <div id="target2"></div> |
| |
| <script> |
| var player1 = target1.animate([ |
| {transform: 'translate(0px)'}, |
| {transform: 'translate(800px)'} |
| ], { |
| duration: 1000, |
| delay: 100 |
| }); |
| |
| var player2 = target2.animate([ |
| {transform: 'translate(0px)'}, |
| {transform: 'translate(800px)'} |
| ], { |
| duration: 1000, |
| delay: 100 |
| }); |
| |
| setTimeout(function() { |
| player1.cancel(); |
| player2.finish(); |
| }, 10); |
| </script> |