Rotate image on toggle with jQuery

Question

Site in question: http://mtthwbsh.com

I'm attempting to create a collapsable nav where when toggled, the arrow points up (and down when hidden).

I've been reading up on rotating images with jQuery, and have found this to be my best resource: Rotate Image(s) OnClick With jQuery?

I understand what's happening here, but am having a tough time visualizing it with my markup. My jQuery for my collapsing nav 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 help explain how I might translate that sort of functionality to my plugin?

Answer 1

Check this, maybe can help somebody 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');
});

Answer 2

It's really just added some CSS to an element. You could create a class in your stylesheet:

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

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

This will not provide any animation. CSS3 transitions can even do that for you without requiring javascript to animate. Take a look at this, which has an JSFiddle demo if you want to try it.

Edit

Here's a demo on how to perform a CSS transition in both directions:

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