Rotate image when switching using jQuery

Question

Website in question: http://mtthwbsh.com

I am trying to create a resettable nav where, when switching, the arrow points up (and down when hiding).

I read about image rotation using jQuery and found this to be my best resource: Rotate OnClick image Using jQuery?

I understand what is happening here, but it's hard for me to imagine it with my markup. My jQuery for my crumbling navigator is as follows:

<script type="text/javascript"> $(document).ready(function(){ /* toggle nav */ $("#menu-icon").on("click", function(){ $(".nav").slideToggle(); $(this).toggleClass("active"); }); }); </script> 

I was wondering if anyone could explain how I can translate such functionality into my plugin?

Answer 1

Actually it just added CSS to the element. You can create a class in the stylesheet:

 .rotate { -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2); } 

And then just use the toggle class to add / remove.

This will not give any animation. CSS3 transitions can even do this for you without requiring javascript for the animation. Take a look at this one , which has a demo version of JSFiddle if you want to try it.

Edit

Here's a demo of how to perform CSS transitions in both directions:

http://jsfiddle.net/jwhitted/NKTcL/

Answer 2

Check this out, maybe someone can help http://jsfiddle.net/gkmagvo3/515/

 <a class="arrow" href="#"> <img class="arrow-img rotate-reset" src="img.png" /> </a> 

Some css:

 .rotate { transform: rotate(-180deg); /*transform: rotate(180deg);*/ transition: .3s; } .rotate-reset { transform: rotate(0deg); transition: .3s; } 

And javascript:

 $('.arrow').on("click", function (event) { $('.arrow-img').toggleClass('rotate'); $('.arrow-img').toggleClass('rotate-reset'); });