如何在單擊鼠標時重復旋轉變換？

Question

不要因為這個問題而責怪我，我真的是jquery新手！

我有一張圖片（導航菜單的漢堡圖標），當我單擊圖片時想重復旋轉。

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

Answer 1

采取您的匿名功能並將其突破。 這樣，您就可以隨心所欲。

$(document).ready(function(){
$('#nav-toggle').click(function(){
    transform($(this));
});

$('<item>').onMouseClick(function(){
    transform($(this));
});

function transform(var nav){
    nav.css({
        "-webkit-transform": "rotate(90deg)",
        "-moz-transform": "rotate(90deg)",
        "transform": "rotate(90deg)"
    }

Answer 2

如果您希望“＃nav-toogle”每次點擊都旋轉“ 90deg”，則可以執行

$('#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/