Rotating DIV rotates slowly on second click

Question

I think I forgot something. This is a very simple spin bottle game.

Javascript / jquery

$('.bottle').on('click', function(e) { this.removeAttribute('style'); var deg = 3000 + Math.round(Math.random() * 500); var css = '-webkit-transform: rotate(' + deg + 'deg);'; this.setAttribute( 'style', css ); }); 

CSS

 .bottle { width: 200px; height: 200px; background-image: url(img/bottle.png); -webkit-transition: -webkit-transform 6s ease-out; } 

HTML:

 <div class="bottle"></div> 

This works great when you first click the bottle. But, starting from the second click, is the rotation very slow?

Answer 1

Try the following: http://jsfiddle.net/sMcAN/

 var i = 1; $('.bottle').on('click', function(e) { this.removeAttribute('style'); var deg = 3000 + Math.round(Math.random() * 500); deg = ((-1) ^ i) * deg; var css = '-webkit-transform: rotate(' + deg + 'deg);'; this.setAttribute('style', css); i++; });​ 

Another update: http://jsfiddle.net/sMcAN/2/

Answer 2

This is because first you go from 0 to a value of more than 3000. But then the value is always within 3000 - so the difference is not big enough, and it still takes 6 seconds that you determined.

One solution would be to make sure that you offset the value and change it every few thousand each time.

 var i = 0, offset = [2000, 4000, 6000, 3000, 5000, 1000]; $('.bottle').on('click', function(e) { this.removeAttribute('style'); var deg = offset[i] + Math.round(Math.random() * 500); i++; if (i > 5) { i = 0; } var css = '-webkit-transform: rotate(' + deg + 'deg);'; this.setAttribute( 'style', css ); });​ 

Answer 3

 math.round(math.random() * 1000); 

Try