如何在鼠標點擊時重複旋轉轉換？

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/

Answer 2

帶上你的自主功能，並打破它。這樣，你可以把它叫做你想要的。

$(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)" 
    }