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

あなたの無名関数を取り、それを壊してください。そうすれば、好きなだけ呼び出すことができます。

$(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」を「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/