javascript - 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

我建议在开始时设置你的值 = -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 插件的依赖。

Fiddle 中的工作演示

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});
});