5

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?

Community
  • 1
  • 1
mtthwbsh
  • 227
  • 2
  • 9
  • 21
  • inspect this for further rotate animation with jQuery: http://stackoverflow.com/questions/12062818/how-to-combine-jquery-animate-with-css3-properties-without-using-css-transitions – Barlas Apaydin Jan 14 '13 at 01:13
  • you should check out this logo animation too (: http://bilol.com.tr/ – Barlas Apaydin Jan 14 '13 at 01:20

2 Answers2

25

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');
});
Andreybeta
  • 430
  • 5
  • 7
  • 1
    I would suggest to use a cubic-bezier transition to make it fancier `transition: .3s cubic-bezier(.17,.67,.21,1.69);` https://jsfiddle.net/6tt38q2q/2/ – Yuri Oct 09 '15 at 18:17
7

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/

Community
  • 1
  • 1
Jason Whitted
  • 4,059
  • 1
  • 16
  • 16
  • I understand how to apply the CSS3 transform, I used one on my logo, I'm just having trouble appending it when clicked is my issue. I'll keep working at it with these notes. – mtthwbsh Dec 22 '12 at 01:58
  • 2
    Putting this inside your click function should work: `$("#menu-icon").toggleClass("rotate");` If it isn't working, do you have a jsfiddle or some other site I can take a look at it? – Jason Whitted Dec 22 '12 at 02:04
  • Just the URL I posted above. I won't be able to get back to it for a bit as I'm traveling, but will take your notes into mind, thanks for your help! – mtthwbsh Dec 22 '12 at 02:50
  • You are have the code I gave to `.toggleClass("rotate");`, but I don't see the `rotate` class in your stylesheet. Try adding the CSS section I posted in my answer to your stylesheet and see if that fixes it. – Jason Whitted Dec 22 '12 at 02:59
  • Was just going to edit my last comment, you probably saw it as I was in the middle of doing it, but it all seems to work (I added a transition time that doesn't appear to work when you close the nav, any clues? but that's not too detrimental to the UX). Thanks for your help! – mtthwbsh Dec 22 '12 at 03:12
  • It's only rotating one direction because of `toggleClass()`. That will either add the `rotate` class or delete it. There is no CSS transform when deleting. If you instead wanted it to toggle between two different classes, say `rotate1` and `rotate2`, you would have to initially set it to `rotate1` and then do a `.toggleClass("rotate 1 rotate2")`. Hopefully that makes sense. – Jason Whitted Dec 22 '12 at 03:24
  • Right, I tried adding transition speeds to the entire div/the image but those didn't work either for that reason. Would there be a way to rotate it back with that transition? – mtthwbsh Dec 22 '12 at 03:27