Rotating DIV spins slowly on second click

css, html, javascript, jquery

Solution

Try this : 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/

Problem

I think I overlooked something. This is a very simple spin-the-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 perfectly on the first click of the bottle. But starting from the second click, the spin is very very slow?

Original source