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-toggle”为您可以执行的每次点击旋转“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/

如何在鼠标点击时重复旋转转换？

2 个答案: