旋轉圖像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"/>