setTimeout queuing timing issues

Question

I am having issues with the timing of a game. Everything works when the start button is clicked for the first time or the user waits long enough before clicking the button again.

Otherwise just the audio fires but the rotation transisitons do not. The rotation transitions are created using transit.js

I have tried using clearQueue at the end of tock loop and on the reset button but it has no effect.

I am trying to achieve:- all animation queues to clear when the start or reset buttons are clicked.

My code

Answer 1

The transit.js that your using is css3 animation. Thats why when you call clearQueue its not stopping the animation. clearQueue only clears jQuery animation

To stop css3, you'll probably have to do something like this.

$('#drive, .wheel').css("-webkit-transform", "none");
$('#drive, .wheel').css("-moz-transform", "none");
$('#drive, .wheel').css("-ms-transform", "none");
$('#drive, .wheel').css("transform", "none");

Depending on the situation but i'm not a big fan of CSS3 animation as yet, because alot of work i have to do need to support IE. (css3 doesn't work on IE9 or older). For now if you just wanna rotate, i would use http://code.google.com/p/jqueryrotate/

then

$(element).stop()

and

$(element).clearQueue()

will work