旋转DIV在第二次点击时缓慢旋转

Question

我想我忽视了一些事情.这是一个非常简单的旋转瓶游戏.

使用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>

这首次点击瓶子时效果很好.但从第二次点击开始,旋转非常慢？

Answer 1

试试这个: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++;
});?

另一个更新:http://jsfiddle.net/sMcAN/2/