jquery - 如何在鼠标单击时重复旋转变换？

Question

不要因为这个问题而责备我，我对 jquery 真的很陌生!

我有一张图片(导航菜单的汉堡图标)，我想在点击图片时重复旋转。

$(document).ready(function(){
$('#nav-toggle').click(function(){
    $(this).css({
        "-webkit-transform": "rotate(90deg)",
        "-moz-transform": "rotate(90deg)",
        "transform": "rotate(90deg)"
    });
});

Answer 1

如果您希望“#nav-toogle”在每次点击时旋转“90 度”，您可以这样做

$('#nav-toggle').click(function(){
    if($(this).data("deg")){
         $(this).data("deg",$(this).data("deg")+90);
    }
    else{
         $(this).data("deg",90);
    }
    $(this).css({
        "-webkit-transform": "rotate("+$(this).data("deg")+"deg)",
        "-moz-transform": "rotate("+$(this).data("deg")+"deg)",
        "transform": "rotate("+$(this).data("deg")+"deg)"
    });
});    

http://jsfiddle.net/QrKrX/