JAvascript 180到-180旋轉

Question

現在，當用戶點擊此圖像時，它會旋轉180度。
我想更新它來執行此操作：如果用戶單擊圖像，它會旋轉180度，但如果用戶再次單擊圖像，它將旋轉回原始位置。

這是我的javascript：

var value = 0
$("#row-1").click(function(){
    value +=180;
    $("#image1").rotate({ animateTo:value});
});

HTML：

<th style="text-align:left;" width="20%" id="row-2">
    Company<br>
    <span class="move_right">Name</span> 
    <img src="/images/sort-arrow-up.png" title="Sort by Company Name" alt="Sort by Company Name" class="sort-right move-left" id="image2" />
</th>

Answer 1

保持一個單獨的變量，用於改變角度，並在每次點擊時取消它：

var value = 0;
var delta = 180;
$("#row-1").click(function(){
    value += delta;
    delta = -delta;
    $("#image1").rotate({ animateTo:value});
});

Answer 2

我建議在begening設置你的值= -180然后每次用戶點擊你做

value = value * -1;

這將給出：180，-180,180，-180（...）等等。 這是你想要的？

Answer 3

var angle = 180;
$("#row-1").toggle(function(){
    value +=angle ;
    $("#image1").rotate({ animateTo:value});
    angle = angle*(-1);
});

Answer 4

我知道這已經得到了解答，但我想在這里找到答案。 jQueryRotate插件也有依賴。

小提琴中的工作演示

HTML ：

<table>
    <th id="row-1">
        <p>Company</p>
        <span>Name</span> 
        <img id="image1" src="http://i.imgur.com/wO5gsMy.png"
             title="Sort by Company Name" alt="Sort by Company Name"
             width="25" height="25"/>
    </th>
</table>

JavaScript ：

var value = 0;
$("#row-1").click(function(){
    value = value ? 0: 180
    $("#image1").rotate({ animateTo:value});
});