jquery - 使用 jQuery 多次触发 CSS 转换

Question

我有一些代码可以按我想要的方式成功旋转 div，但是，它只执行一次。我假设这是因为该函数只是添加了 CSS transform 属性，并且一旦添加了它们，浏览器(我在 Win7 上使用 Chrome)就不会在意它们是否被第二次添加.有没有办法让 div 在我每次点击时都旋转，而不是只旋转一次？

jQuery

$(function(){
    $('.hanging-div').on('click', function(){
        $(this).css({
            'transform':'rotate(-360deg)',
            '-ms-transform':'rotate(-360deg)',
            '-moz-transform':'rotate(-360deg)',
            '-o-transform':'rotate(-360deg)'
        });
    });
});

HTML

<div class="hanging-div"><img src="http://placehold.it/65x350"></div>

CSS

.hanging-div {
    margin:0 auto;
    display:block;
    width:200px;
    padding:50px 0;
    transition:all 2s;
    -moz-transition:all 2s;
    -webkit-transition:all 2s;
    -o-transition:all 2s;
    transform-origin:50% 0%;
    -moz-transform-origin:50% 0%;
    -webkit-transform-origin:50% 0%;
    -ms-transform-origin:50% 0%;
    -o-transform-origin:50% 0%;
}

这是 fiddle :http://jsfiddle.net/MrP43/1/

编辑

之后我也试过删除 transform 属性，但似乎没有效果。

$(function(){
    $('.hanging-div').on('click', function(){
        $(this).css({
            'transform':'rotate(-360deg)',
            '-ms-transform':'rotate(-360deg)',
            '-moz-transform':'rotate(-360deg)',
            '-o-transform':'rotate(-360deg)'
        }, function(){
                $(this).css({
                    'transform':'',
                    '-ms-transform':'',
                    '-moz-transform':'',
                    '-o-transform':''
                });
        });
    });
});

Answer 1

好的，感谢@GroundZero，我已经弄明白了。我只是将旋转度数设为一个变量，并在每次单击时从该变量中减去 360 度，现在它按预期工作了。现在我想知道这是否是最好的方法？它有效，所以我没有提示，但如果其他人有任何解决方案，我很乐意看到它们。谢谢!

$(function(){
    n = -360;
    $('.hanging-div').on('click', function(){
        $(this).css({
            'transform':'rotate('+n+'deg)',
            '-ms-transform':'rotate('+n+'deg)',
            '-moz-transform':'rotate('+n+'deg)',
            '-o-transform':'rotate('+n+'deg)'
        });
        n-=360;
    });
});

fiddle :http://jsfiddle.net/tuJjg/