旋转图像180度点击jQuery与动画

Question

我做了一个下拉导航，我想使用旋转的箭头来切换它。

我有这个https://jsfiddle.net/jaUJm/39/

$(document).ready(function() { 
$(".toggle").click(function() { 
    $("#image").css({'transform': 'rotate(-180deg)'}); 
}); 
}); 

我只是不知道如何使它复位，如，完成旋转，所以它指向下方，当它再次被点击第二次及以后。

也许与

.flip { transform: rotate(-180deg);}

和.flip类使用if()和addClass()/removeCLass()？

谢谢！

Answer 1

可能会改变

$("#image").css({'transform': 'rotate(-180deg)'}); 

到

$("#image").toggleClass('flip'); 

Answer 2

您可以使用toggleClass

$(document).ready(function() { 
 
    $(".toggle").click(function() { 
 
     $("#image").toggleClass('flip'); 
 
    }); 
 
});

#image { 
 
    -moz-transition: transform 1s; 
 
    -webkit-transition: transform 1s; 
 
    transition: transform 1s; 
 
} 
 

 
.flip { 
 
    transform: rotate(-180deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<img class="toggle" id="image" src="https://i.imgur.com/uLlPUfM.png"/>

Answer 3

呦你已经得到了关于toggleClass的其他答案，但他们都没有解释你有问题。

您已成功设置元素的transform到-180deg一旦你点击，但你的问题是，在第二次点击 - 你不添加另一个-180deg该元素。您只需将-180deg的值设置为transform属性（实际上什么也不做，因为这个元素上已经有-180deg）。

可以解决这个问题使用的其他toggleClass例子之一（这将工作的伟大），你也可以检查的transform当前值none，如果是这样的话 - 设置-180deg，否则 - 复位：

$(document).ready(function() { 
 
    $(".toggle").click(function() { 
 
    console.log($("#image").css('transform')); 
 
    if ($("#image").css('transform') == 'none') { 
 
     $("#image").css({'transform': 'rotate(-180deg)'}); 
 
    } else { 
 
     $("#image").css({'transform': ''}); 
 
    }; 
 
    }); 
 
});

#image { 
 
    -moz-transition: transform 1s; 
 
    -webkit-transition: transform 1s; 
 
    transition: transform 1s; 
 
} 
 

 
.flip { 
 
    transform: rotate(-180deg); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
 
<img class="toggle" id="image" src="https://i.imgur.com/uLlPUfM.png"/>